Created
July 6, 2023 12:50
-
-
Save BramEsposito/74e6f569eb788e3e766221565d10334e to your computer and use it in GitHub Desktop.
How to refactor Vue2's deprecated slot-scope to the 2.6.0 syntax
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>slot-scope</title> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> | |
| <style> | |
| .oldcomponent, | |
| .newcomponent { | |
| padding: 20px; | |
| border-radius: 10px; | |
| background-color: #CCC; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| Vue.component('oldcomponent', { | |
| name: "OldComponent", | |
| template: ` | |
| <div class="oldcomponent"> | |
| <slot :text="greetingMessage" :count="1"></slot> | |
| </div> | |
| `, | |
| data() { | |
| return { | |
| greetingMessage: 'hello old approach.' | |
| } | |
| } | |
| }); | |
| Vue.component('newcomponent', { | |
| name: "NewComponent", | |
| template: ` | |
| <div class="newcomponent"> | |
| <slot :text="greetingMessage" :count="1"></slot> | |
| </div> | |
| `, | |
| data() { | |
| return { | |
| greetingMessage: 'hello new approach.' | |
| } | |
| } | |
| }); | |
| </script> | |
| <div id="app"> | |
| <div> | |
| <h2>Vue slot-scope is deprecated.</h2> | |
| <h3>This is an example how it was used.</h3> | |
| <p>This is the pre-2.6.0 approach:</p> | |
| <OldComponent> | |
| <div slot-scope="{text, count}"> | |
| {{ text }} count: {{ count }} | |
| </div> | |
| </OldComponent> | |
| <p>This is the post-2.6.0 approach:</p> | |
| <NewComponent v-slot="slotProps"> | |
| {{ slotProps.text }} count: {{ slotProps.count }} | |
| </NewComponent> | |
| </div> | |
| </div> | |
| <script type="text/javascript"> | |
| Vue.config.devtools = true | |
| new Vue({ | |
| el: '#app' | |
| }) | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment