插槽具名插槽"/>
vue 匿名插槽具名插槽
插槽的默认名字是default（匿名插槽） 也可以通过name属性设置插槽的名字（具名插槽）
1、如果需要往具名插槽中插入数据
则所有的数据都源自当前组件的父组件
本例中是在根组件中使用heaven组件所以heaven组件中插槽的数据来源是根组件
2、必须把数据用template包裹
3、并给template使用v-slot 该指令的简写形式 例如 v-slot：xxx->#xxx
如果组件中只有一个插槽
1、则v-slot指令可以直接写在组件上
2、往插槽中插入的数据 不需要用template包裹
匿名插槽、具名插槽
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title>
</head>
<body>
<div id="app"><input type="text" v-model="a"><hevan><div>匿名插槽</div> <template #jumi>具名插槽</template></hevan>
</div>
<template id="hevan">
<div>这是hevan组件<slot></slot><slot name="jumi"></slot>
</div>
</template>
</body>
<script src=".6.9/vue.js"></script>
<script type="text/javascript">let hevan={template:"#hevan",}var app = new Vue({el: '#app',data: {},components:{hevan},
})
</script>
</html>
作用域插槽 数据来源不设限制可以是父组件，可以是插槽本身组件
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title>
</head>
<body>
<div id="app"><!-- 作用域插槽 --><weilei #xxx="props"><template>{{props}}</template></weilei><!-- 结构插槽 --><weilei #xxx="{wl}"><template>{{wl}}</template></weilei>
</div>
<template id="weilei"><div>本身的数据<slot name="xxx" :wl='wl'></slot></div>
</template>
</body>
<script src=".6.9/vue.js"></script>
<script type="text/javascript">let weilei={template:"#weilei",data:function(){return{wl:"我是虎"}}}var app = new Vue({el: '#app',data: {},components:{weilei},
})
</script>
</html>
更多推荐
vue 匿名插槽具名插槽
发布评论