本文为大家介绍了关于Vue中slot插槽作用与原理介绍,感兴趣的小伙伴一起来看看吧。
把父组件中的数组,显示在子组件中,子组件通过一个slot插槽标签显示父组件中的数据。
子组件
{{msg}}
这是子组件插槽默认的值
父组件
{{ msg }}
这是父组件传入的值,将会替换子组件中slot中编写的默认值
父组件中通过slot属性,给插槽命名,在子组件中通过slot标签,根据定义好的名字填充到对应的位置。这样就可以指定多个可区分的slot,在使用组件时灵活的进行插值。
子组件:
{{msg}}
父组件:
{{ msg }}
h1111111111的内容 h2222222的内容 h33333的内容
用得不多。
将子组件中data的数据传出,在父组件中使用。子组件渲染作用域插槽时,可以将子组件内部的数据传递给父组件,让父组件根据子组件的传递过来的数据决定如何渲染该插槽。在标签中通过v-slot="要传过来的数据"来接收数据。
实现原理:当子组件vm实例化时,获取到父组件传入的slot标签的内容,存放在vm. s l o t 中,默认插槽为 v m . slot中,默认插槽为vm. slot中,默认插槽为vm.slot.default,具名插槽为vm. s l o t . x x x , x x x 为插槽名,当组件执行渲染函数时候,遇到 s l o t 标签,使用 slot.xxx,xxx 为插槽名,当组件执行渲染函数时候,遇到slot标签,使用 slot.xxx,xxx为插槽名,当组件执行渲染函数时候,遇到slot标签,使用slot中的内容进行替换,此时可以为插槽传递数据,若存在数据,则可称该插槽为作用域插槽。
子组件:
{{ msg }}
{{ strDate.name }}
{{ strDate.job }}
父组件:
{{ msg }}
{{ strProps.str.job }} {{ strProps.str.age }}
以上就是关于Vue中slot插槽作用与原理介绍的全部内容了,感兴趣的小伙伴记得点击关注哦。