插槽
默认情况下，使用组件的时候不能在组件标签内填充内容的
-
插槽的作用：在使用组件的时候，在组件标签内填充的内容，能成功渲染
<template id="info"> <div> <p>我是组件</p> </div> </template><div id="app"> <info> <!--在使用组件时，填充的内容不能渲染--> <P>使用组件标签时填充的元素</P> </info> </div>new Vue({ el: '#app', components:{ "info":{ template:"#info", }, }, });
插槽的使用
定义组件的时候使用slot标签在组件内部”留坑“，那么在使用组件的时候，填充的内容就会渲染在坑上
-
在使用slot标签留坑的时候也可以指定坑内的默认内容，如果指定了坑的默认内容，那么在使用组件的时候没有填充内容，则渲染slot标签的默认内容。如果指定了坑的默认内容，那么在使用组件的时候填充内容，则渲染填充内容。
<template id="info"> <div> <p>我是组件</p> <!--使用solt标签在组件内容留坑处理--> <slot> <!--并且可以指定默认的填充内容，也可以不指定默认的填充内容--> <p>我是组件坑内的内容</p> </slot> </div> </template><div id="app"> <info> <!-- 1.在使用组件时，填充了内容就会显示填充的内容 2.如果没有填充内容就会显示组件slot标签的默认内容 --> <P>使用组件标签时填充的元素</P> </info> </div>new Vue({ el: '#app', components:{ "info":{ template:"#info", }, }, });
slot标签注意点
-
默认一对slot标签就会渲染一次组件填充的全部内容，多次slot标签则渲染多次
<template id="info"> <div> <p>我是组件</p> <!--两对slot标签就会渲染填充的内容两次--> <slot> <p>我是组件坑内的内容</p> </slot> <slot> <p>我是组件坑内的内容</p> </slot> </div> </template><div id="app"> <info> <P>使用组件标签时填充的元素</P> </info> </div>new Vue({ el: '#app', components:{ "info":{ template:"#info", }, }, });
插槽的命名
给slot标签添加name属性可以指定插槽的名称
-
使用的时候需要给填充的内容绑定slot="插槽名称"，填充到指定的插槽
<template id="info"> <div> <p>我是组件</p> <slot name="one"> <p>我是组件坑内的内容</p> </slot> <slot name="two"> <p>我是组件坑内的内容</p> </slot> </div> </template><div id="app"> <info> <!--这种填充方式存在指令属性冗余问题，因为需要多次绑定slot属性--> <P slot="one">使用组件标签时填充的内容1</P> <P slot="one">使用组件标签时填充的内容11</P> <P slot="one">使用组件标签时填充的内容111</P> <P slot="two">使用组件标签时填充的内容2</P> <P slot="two">使用组件标签时填充的内容22</P> <P slot="two">使用组件标签时填充的内容222</P> </info> </div>new Vue({ el: '#app', components:{ "info":{ template:"#info", }, }, }); -
使用v-slot指令和template标签解决上述问题
<template id="info"> <div> <p>我是组件</p> <slot name="one"> <p>我是组件坑内的内容</p> </slot> <slot name="two"> <p>我是组件坑内的内容</p> </slot> </div> </template><div id="app"> <info> <template v-slot:one> <P>使用组件标签时填充的内容1</P> <P>使用组件标签时填充的内容11</P> <P>使用组件标签时填充的内容111</P> </template> <template v-slot:two> <P>使用组件标签时填充的内容2</P> <P>使用组件标签时填充的内容22</P> <P>使用组件标签时填充的内容222</P> </template> <!--简写--> <template #one> <P>使用组件标签时填充的内容1</P> <P>使用组件标签时填充的内容11</P> <P>使用组件标签时填充的内容111</P> </template> <template #two> <P>使用组件标签时填充的内容2</P> <P>使用组件标签时填充的内容22</P> <P>使用组件标签时填充的内容222</P> </template> </info> </div>new Vue({ el: '#app', components:{ "info":{ template:"#info", }, }, });
作用域插槽
用域插槽就是带数据的插槽, 就是让父组件在填充子组件插槽内容时也能使用子组件的数据
子组件通过v-bindz指令传递
-
父组件通过slot-scope接收
<template id="info"> <div> <p>我是组件</p> <slot v-bind:names= "name"></slot> </div> </template><div id="app"> <info> <template slot-scope="obj"> <P>使用组件标签时填充的元素 {{ obj.names }}</P> </template> </info> </div>new Vue({ el: '#app', components:{ "info":{ template:"#info", data: function () { return { name: "lnj", } } }, }, }); -
整合优化：使用v-slot指令
<template id="info"> <div> <p>我是组件</p> <slot v-bind:names= "name"></slot> </div> </template><div id="app"> <info> <!-- 1.v-slot:插槽名称="通过什么变量接收" 2.数据会以对象的形式保存到变量中 3.匿名插槽的名称为default --> <template v-slot:default="obj"> <P>使用组件标签时填充的元素 {{ obj.names }}</P> </template> </info> </div>new Vue({ el: '#app', components:{ "info":{ template:"#info", data: function () { return { name: "lnj", } } }, }, });
