vue slot 插槽的简单讲解和示例

    xiaoxiao2022-07-14  147

    插槽其实可以理解是父子组件的传参,或者或动态的占位符,父组件决定插槽的内容,子组件决定插槽的插在何处。

    1.不具名插槽

        即插槽中不用写name去匹配,直接使用

    (1)在引入的子组件标签中写入要插入的内容

    (2)在子组件中写一个插槽标签来接收内容

    效果:

    2。具名插槽

    即需要在父组件引入的子组件标签中写入插槽内容,标签中的slot的属性值,会对应子组件slot标签的name属性值,注意,没有匹配上的不会显示

    (1)父组件写入要插入的内容,同时配置slot 属性,来对应要插入子组件的哪个slot插槽 

    (2)子组件通过slot标签的name属性来匹配父组件的传入的值

    (3)效果:

    3.作用域插槽--这条基本没有用过,就不写了

    最新回复(0)