slot 插槽
多用于移动端,在子组件中写好插槽
需要内容在父组件中自由编写
如果有多个值,同时放入组件进行替换,一起作为slot替换元素,
如果子组件中没有slot标签,则父组件中Content标签之间的内容都将舍弃。
子组件
<div>
<h2>我是content子组件组件内容</h2>
<div>
<slot></slot>
</div>
父组件在slot插入一个按钮、表单等
<Content><button>按钮</button></Content>
<Content><input type="text"></Content>
<Content><input type="text"><button>按钮</button><h2>插槽</h2></Content>
具名插槽
子组件给slot 起一个name名字
不带name的slot会有一个默认名default
vue3:父元素通过
<template v-slot:name><button>按钮</button></template>
vue2:父元素通过
<button slot:name>按钮</button>
插槽作用域
作用域: age 为父元素定义的变量名
<template v-slot:name><button>{{ age }}</button></template>
注意:父级模板中所有内容在父级作用域中编译,子模板中的所有内容都是在子作用域中编译
备用内容
在子组件中
<slot name="button"><button>默认按钮</button></slot>
<button>默认按钮</button>叫做备用内容,如果父组件没有定义内容,那么就取用备用内容
作用域插槽
作用: 父组件替换插槽的标签,但是数据由子组件提供。
绑定在元素上的attribute被称为插槽 prop。
子组件data中有一个list数组[1,2,3,4]
<slot :list="list" name="arrlist"></slot>
//父组件接收转为无序列表 (有序ol) 如没有具名默认default 后面自定义名称
<template v-slot:arrlist="slotProps">
<ul>
<li v-for="item in slotprops" :key="item">{{ item }}</li>
</ul>
</template>