Heim >Web-Frontend >View.js >Benannte Slots und bereichsbezogene Slots, die bei der Slot-Analyse in Vue verwendet werden
Dieser Artikel vermittelt Ihnen relevantes Wissen über vue, das hauptsächlich Probleme im Zusammenhang mit der Verwendung benannter Slots und Scope-Slots vorstellt. Ein Slot ist ein Konto in einer untergeordneten Komponente, das der übergeordneten Komponente standardmäßig zur Verfügung gestellt wird Schauen wir uns die Slots, benannten Slots und Scope-Slots gemeinsam an. Ich hoffe, dass es für alle hilfreich ist.
[Verwandte Empfehlungen: Javascript-Video-Tutorial, vue.js-Tutorial]
2 Nach Version 2.6.0 werden Slot und Slot-Scope einheitlich durch V-Slot ersetzt.
3. Zu den Slots gehören Standard-Slots, benannte Slots und Scope-Slots
1、通过vue-cli创建好初始化项目 2、src下创建category.vue,同时在App.vue中引入
3. Verwendung benannter Slots
//category.vue <template> <div> <h3>{{ title }}</h3> //准备两个带有不同name的插槽(可以让使用者在指定的地方显示数据) <slot>默认插槽1</slot> <slot>默认插槽2</slot> </div> </template> <script> export default { name: "category", data() { return {}; }, props: ["title", "listData"], }; </script> <style> #bck { background-color: skyblue; width: 200px; height: 300px; } h3 { text-align: center; background-color: #bfa; } </style>
durch die in der Unterkomponentenkategorie definierten Unterschiede. Der Name ermöglicht die Anzeige der Daten am angegebenen Ort:
//App.vue <template> <div> <category> <img alt="Benannte Slots und bereichsbezogene Slots, die bei der Slot-Analyse in Vue verwendet werden" > <a>更多</a> </category> <category> <ul> <li>{{ g }}</li> </ul> <div> <a>单机游戏</a> <a>网络游戏</a> </div> </category> <category> <video></video> <div> <a>更多信息1</a> <a>更多信息2</a> </div> </category> </div> </template> <script> import category from "./components/category"; export default { name: "app", data() { return { foods: ["麻辣烫", "烧烤", "小青龙", "炸酱面"], game: ["魔兽世界", "FIFA2016", "NBA2K", "洛克王国"], }; }, mounted() {}, methods: {}, components: { category, }, }; </script> <style> #app, #game { display: flex; justify-content: space-around; } img { width: 100%; } video { width: 100%; } </style>
1. Fügen Sie nach der Definition des Slots „slot="name" zum Tag hinzu muss angezeigt werden, und der Inhalt, der angezeigt werden muss, kann an der angegebenen Position angezeigt werden
2. Der Benutzer empfängt Daten und legt die Struktur fest
//category.vue <template> <div> <h3>{{ title }}</h3> <slot>作用域插槽</slot> </div> </template> <script> export default { name: "category", data() { return { foods: ["麻辣烫", "烧烤", "小青龙", "炸酱面"], games: ["魔兽世界", "FIFA2016", "NBA2K", "洛克王国"], }; }, props: ["title"], }; </script> <style> #bck { background-color: skyblue; width: 200px; height: 300px; } h3 { text-align: center; background-color: #bfa; } </style>
Javascript-Video-Tutorial,
vue.js-TutorialDas obige ist der detaillierte Inhalt vonBenannte Slots und bereichsbezogene Slots, die bei der Slot-Analyse in Vue verwendet werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!