<强>默认插槽:
//父组件
& lt; div>
& lt; h4>父组件& lt;/h4>
& lt; testChild>
& lt; div>默认插槽& lt;/div>
& lt;/testChild>
& lt;/div>//子组件
& lt; div>
& lt; h5>子组件& lt;/h5>
& lt; slot> & lt;/slot>
& lt;/div>
<强>具名插槽:
,注意:具名插槽需要包裹在,template 标签中,否则会报错
//父组件
& lt; div>
& lt; h4>父组件& lt;/h4>
& lt; testChild>
& lt;模板v-slot: test>//v-slot: +插槽名
& lt; ul>
& lt;李v=跋钅壳宓ァ痹趝{item.name}} & lt;/li>
& lt;/ul>
& lt;/template>
& lt;/testChild>
& lt;/div>//子组件
& lt; div>
& lt; h5>子组件& lt;/h5>
& lt;槽的名字=安馐浴弊４? lt;/slot>//name="插槽名”
& lt;/div>
<强>子组件向父组件传参:
//父组件
& lt; div>
& lt; h4>父组件& lt;/h4>
& lt; testChild>
& lt;模板v-slot:测试="数据"祝辞//具名插槽,v-slot: +插槽名+=弊远ㄒ迨菝?子组件所传参数都是其属性
& lt; ul>
& lt;李v=癲ata.list2项目”在{{item.name}} & lt;/li>
& lt;/ul>
& lt;/template>
& lt;模板v-slot=" dataDefalut "祝辞//默认插槽
{{dataDefalut.sName}}
& lt;/template>
& lt;/testChild>
& lt;/div>//子组件
& lt; template>
& lt; div>
& lt; h5>子组件& lt;/h5>
& lt;槽name=安馐浴?用于=坝糜凇弊４? lt;/slot>
& lt;槽:sName="名称"祝辞& lt;/slot>
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
名称:“testChild”,
数据(){
返回{
用于:(
{名称:“ccc”},
{名称:ddd的}
]，
名称:“名字”
}
}
}
& lt;/script>
结果:
闲话不多说,上代码
子组件,里面有插槽插槽,并在槽上绑定了文本值
& lt; template>
& lt; div @click=" $排放(“改变”,检查+ 1)”在
& lt;槽的名字=巴急辍?文本=拔谋尽弊４? lt;/slot>
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
数据(){
返回{
:“我是子组件”
}
},
道具:“检查”,
模型:{
道具:“检查”,
事件:“改变”
}
}
& lt;/script>
父组件通过slot-scope就可以拿到子组件槽上绑定的值,并且2.5.0版本可以用于任意元素上
& lt; template>
& lt; div id=坝τ谩北?
& lt; img src=" https://www.yisu.com/zixun/assets/logo.png "比;
& lt; !——& lt; router-view/祝辞——比;
& lt;汽车v模型=爸甘北?
& lt; div槽=巴急辍眘lot-scope=暗谰摺北?
{{props.text}}
& lt;/div>
& lt;/car>
& lt;/div>
& lt;/template>
这样,就可以拿到子组件里面的文本值。
以上所述是小编给大家介绍的vue槽与传参实例代码讲解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留的言,小编会及时回复大家的!
