<p>来自父组件的内容</p>
<p>{{props.msg}}</p>
</template>
</my-component18>
</div>
Vue.component('my-component18',{
template: '<div class="container"><slot msg="来自子组件的内容"></slot></div>'
});
var app18 = new Vue({
el: '#app18'
});
观察子组件的模板，在<slot>元素上有一个类似props 传递数据给组件的写法msg＝” xxx ”，将数据传到了插槽。
父组件中使用了＜template＞元素，而且拥有一个
scope＝”props ”的特性，这里的props只是一个临时变量，就像
v-for= ” item in items 里面的item 一样，template 内可以通过临时变量props访问来自子组件插槽的数据msg 。下面看下Vue组件中slot的用法
主要是让组件的可扩展性更强。
1. 使用匿名slot
2. 给slot加个名字
如果不在有slot的组件里加入任何标签，slot什么都不会显示的。
总结
以上所述是小编给大家介绍的vue组件详解之使用slot分发内容，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
