来自 Web前端 2020-04-29 17:44 的文章
当前位置: 网上澳门金莎娱乐 > Web前端 > 正文

网上澳门金莎娱乐vue插槽slot和slot-scope

时间: 2019-09-07阅读: 124标签: 插槽插槽

时间: 2019-03-12阅读: 353标签: slot

插槽我对他的理解就是父组件的东西插到子组件的slot/slot里面,也不知道这样理解对不对,方便自己记忆

网上澳门金莎娱乐,插槽用于内容分发,存在于子组件之中。

普通插槽

插槽作用域

父组件如下:

父级组件作用域为父级,子级组件作用域为子级,在哪定义的作用域就在哪。

template div  h3这里是父组件/h3 child div span这是父组件插到子组件的slot标签/span span这是父组件插到子组件的slot标签/span span这是父组件插到子组件的slot标签/span /div /child /div/templatescriptimport child from './children'export default { components: { child }}/script

子组件之间的内容是在父级作用域的,无法直接访问子组件里面的数据。

子组件如下:

插槽元素

template div h3这里是子组件,父组件的child将会插到slot标签里面/h3 slot/slot /div/templatescriptexport default {}/script

slot/slot 或 slot name="名称"默认值/slot

显示效果如下:

1:如果定义了slot插槽元素,那么子组件之间的内容将会被插入到插槽元素之中。(可简单理解为向插槽提供内容)2:如果定义了slot插槽元素,并没有在子组件之间插入内容,那么将使用默认值。(不提供内容,将使用默认值)3:如果没有定义slot元素,那么子组件之间的内容将会被废弃。

具名插槽

// 定义组件Vue.component("my-test",{ template:`divslot默认值/slot/div`})// 向插槽提供内空my-testhello slot/my-test

父组件

多插槽元素

template div  h3这里是父组件/h3 child div p这不是具名插槽/p p这不是具名插槽/p p这不是具名插槽/p /div div slot="havename" p这是具名插槽/p p这是具名插槽/p p这是具名插槽/p /div /child /div/templatescriptimport child from './children'export default { components: { child }}/script

当子组件中有多个插槽元素时,要为每个插槽name特性定义名称。

子组件

1:如果没有定义名称,那么采用默认名称:default;用于存放不指定名称的内容

template div h3这里是子组件,父组件的child将会查到下面/h3 slot name="havename"/slot slot/slot /div/templatescriptexport default {}/script

2:如果多个插槽没有定义名称或名称相同的情况下,那么v-slot(# 缩写)指令将无法找到对应插槽或混乱。

本文由网上澳门金莎娱乐发布于Web前端,转载请注明出处:网上澳门金莎娱乐vue插槽slot和slot-scope

关键词: