vue中插槽的个人理解
在vue中,插槽是一个用的比较多的API,在官方的文档中,在 2.6.0 中,我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot
指令)。它取代了 slot
和 slot-scope
这两个目前已被废弃但未被移除且仍在文档中的 attribute,
vue插槽的作用:在vue中实现的一套分发内容的API,将slot元素作为承载内容分发出口。用人话说就是:想要在一个组件标签中添加新的内容,必须在该组件内声明一个slot元素,否则,添加的新内容则不会被渲染。
通常我们会在vue中将各种通用的功能单独拿出来进行封装,以便于后面复用,但是有时候需要复用的组件不是完美契合,这个时候就需要用到插槽,slot可以让用户拓展组件,更好的实现组件的复用。
组件插槽分为三种:
1:默认插槽
使用方法:
子组件:
<div> <p>这里是子组件</p> <slot></slot> </div>
父组件:
<div> <!--引用子组件--> <myslot> <p>这里是父组件</p>//当想在父组件中渲染这一行数据时,必须要在引用的子组件中定义一个slot标签 </myslot> </div>
最后显示内容: 这里是子组件 这里是父组件
父组件想在引入的组件中显示 <p>这里是父组件</p>,就必须先在子组件中用slot定义一个插槽,用来接收父组件传递的代码,再才能正常的在页面中渲染
2:具名插槽
顾名思义,具名插槽是在slot标签上有一个属性:name,可以将指定的代码放入指定的插槽中
具体定义如下:
<!--子组件--> <template> <div> <hander> <!--这里放入name=“hander”的代码段--> <slot name="hander"></slot> </hander> <footer> <!--这里放入name=“footer”的代码段--> <slot name="footer"></slot> </footer> </div> </template>
<!--父组件--> <div> <p>大家好,这里是父组件</p> <template v-slot:hander> <span>这里是放入hander中的代码段</span> </template> <template v-slot:footer> <span>这是放在footer中的代码段</span> </template> </div>
注意:v-slot指令只能写在template中
v-slot可以简写为#
3:作用域插槽
作用域插槽主要用于解决的问题是:当父组件向子组件插槽传递模板内容时存在访问子组件数据的问题
可以看例子:
<!--子组件-->
<template> <div> <slot>{{user.name}}<slot> </div> </template> <script> export default{ data(){ return{ user:{ name:"jay", age:18 } } } } </script>
当父组件引用子组件时,想将子组件中的user.name替换为user.age时,不可以直接在父组件中更改子组件中的user.name,因为在官方文档中,父级模板所有内容都是在父级作用域中编译的,子级模板所有内容都是在子作用域中编译的。
为了解决子组件的user不能在父组件中使用的问题,我们可以将user用属性绑定的方式传给父组件,父组件用一个自定义名称进行接收
子组件可以这么写:
<!--子组件--> <template> <div> <slot :user="user">{{user.name}}<slot> </div> </template> <script> export default{ data(){ return{ user:{ name:"jay", age:18 } } } } </script>
因此,父组件可以这么写:
<template> <myslot>
<template v-slot="slotProps">
{{slotProps.user.age}}
</template>
</myslot> </template> <script> import myslot from '@/component/myslot.vue' export default{ data(){ return{} }, components:{ myslot } } </script>
在子组件中,将自己的数据用属性绑定的方式传输给父组件,父组件在template中用v-slot="自定义名",进行接收,再通过自定义名.进行数据访问。