20200507 Vue 组件---插槽

slot 插槽

什么是solt(插槽)?

为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为 内容分发,Vue.js 实现了一个内容分发 API ,使用特殊的 slot 元素作为原始内容的插槽。

插槽的作用

父组件的内容与子组件混合,从而弥补了视图的不足。 混合父组件的内容与子组件自己的模板

单个插槽的用法:


        

这里是父组件的作用域

//这里父组件的作用域,如果直接在这里写一个 p 标签,那么将无法显示 //此时就需要用到 slot 插槽 //如果这里有内容,就会替换掉子组件模板中slot中的内容。 //如果这里没有内容,就显示slot中的内容

具名插槽的用法:

根据不同的视图不同的div指定要使用哪个插槽

    

我是标题

我是内容1

我是内容2

我是内容3


作用域插槽

作用域插槽是一种特殊的 slot ,使用一个可以复用的模板来替换已经渲染的元素
主要用途:从子组件获取数据

第一步:在子组件中定义一个 slot ,在 slot 中写上传递的数据
第二步:在template 模板中定义一个 slot-scope = "自定义一个变量"
第三步:在template模板中以文本插值的形式,使用自定义的变量名.要拿到的数据所在的属性

你可能感兴趣的:(20200507 Vue 组件---插槽)