vue slot+传参

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

插槽分为默认插槽和具名插槽：

默认插槽：

　　
//父组件
<div>
     <h3>父组件</h3>
     <testChild>
         <div>默认插槽</div>
     </testChild>
</div>

//子组件

<div>
    <h4>子组件</h4>
    <slot></slot>
</div>

具名插槽：

  注意：具名插槽需要包裹在  template  标签中，否则会报错

//父组件
<div>
        <h3>父组件</h3>
        <testChild>
            <template v-slot:test>//v-slot: + 插槽名
                <ul>
                    <li v-for="item in list">{{item.name}}</li>
                </ul>
            </template>
        </testChild>
    </div>
//子组件
 <div>
        <h4>子组件</h4>
        <slot name="test"></slot> //name="插槽名"
    </div>

子组件向父组件传参：

//父组件 
 <div>
        <h3>父组件</h3>
        <testChild>
            <template v-slot:test="data">//具名插槽，v-slot: +插槽名+ ="自定义数据名"，子组件所传参数都是其属性
                <ul>
                    <li v-for="item in data.list2">{{item.name}}</li>
                </ul>
            </template>
            <template v-slot="dataDefalut">//默认插槽
                {{dataDefalut.sName}}
            </template>
        </testChild>
    </div>


//子组件

<template>
    <div>
        <h4>子组件</h4>
        <slot name="test" :list2="list2"></slot>
        <slot :sName="name"></slot>
    </div>
</template>

<script>
    export default {
        name: "testChild",
        data(){
            return {
                list2:[
                    {name:'ccc'},
                    {name:'ddd'}
                ],
                name:'name'
            }
        }
    }
</script>

结果：

以上是 vue slot+传参 的全部内容， 来源链接： utcz.com/z/376626.html

回到顶部