<body>
<div id='root'>
<child>
<!-- 父组件调用子组件的时候,给子组件传了一个插槽 这个插槽叫作用域插槽
作用域插槽必须以 template开头和结尾
同时这个插槽要声明 你要从子组件接收的数据都放在哪 这里是放在props里面了
还要告诉子组件模板的信息 即接收的props怎么展示数据 -->
<template slot-scope="props">
<!-- <li>{{props.item}} -- Tony</li> -->
<h4>{{props.item}} -- Tony</h4>
</template>
</child>
</div>
<script>
Vue.component('child',{
data:function(){
return {
list:[1,2,3,4]
}
},
/*child组件做一个列表的循环,但列表中的每一项怎么显示由外部告知
*子组件用slot时会往slot里面传一个item数据,然后上面的<child>就会用这个item
item 就放在了slot-scope="props"中
*/
template:`
<div>
<ul>
<slot
v-for="item of list"
:item=item>
</slot>
</ul>
</div>
`
});
/*
当子组件里面做循环 或者他的某一部分dom zone 应该由外部传递过来时 使用作用域插槽
使用作用域插槽 子组件可以向父组件的插槽里面传数据(如:上面的item)
*/
var vm =new Vue({
el:'#root'
})
</script>
</body>
Vue作用域插槽
最新推荐文章于 2024-06-01 21:28:55 发布