插槽slot

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>