Vue插槽 slot
生活随笔
收集整理的這篇文章主要介紹了
Vue插槽 slot
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
1. 什么是插槽
插槽slot 是往父組件中插入額外內(nèi)容，實現(xiàn)組件的復(fù)用，一個插槽插入到一個對應(yīng)的標簽中
2. 實例：
一個組件中不允許有兩個匿名插槽
</head> <body><div id="root"><child><div class="header" slot="header">header</div><div class="footer" slot="footer">footer</div>hello <！-- 沒有名字的標簽?zāi)J會放置到name:default的slot中 --></child></div> <script>Vue.component('child',{template: `<div><slot name="header"></slot> <!-- 有名插槽 --><div class="content">content</div><slot name="footer"></slot> <!-- 有名插槽 --><slot>如果沒有hello就顯示slot的內(nèi)容</slot> <!-- 匿名插槽 slot中可以設(shè)置默認內(nèi)容，如果傳遞了內(nèi)容則替換掉 --></div>` })var vm = new Vue({el: '#root'}) </script> </body>
?3. 作用域插槽
固定寫法：父組件中<template slot-scope="props"></template>?? ? ?//props可以自定義用來接收子組件的數(shù)據(jù)
<body><div id="root"><child><template slot-scope="props"><li>{{props.item2}}</li> //接收子組件的item值</template></child></div> <script>Vue.component('child',{data(){return{list:[1,2,3,4]}},template: `<div><ul><slot v-for="item of list" :item2="item"></slot></ul></div>` })var vm = new Vue({el: '#root'}) </script> </body>
?
轉(zhuǎn)載于:https://www.cnblogs.com/ly2646/p/9464924.html
總結(jié)
以上是生活随笔為你收集整理的Vue插槽 slot的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [Python设计模式] 第21章 计划
- 下一篇： 目标反射回波检测算法及其FPGA实现 之