当前位置： 移动技术网 > IT编程>开发语言>JavaScript > vue slot+传参

vue slot+传参

2019年04月29日  | 移动技术网IT编程  | 我要评论

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

默认插槽：

　　
//父组件
<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>

结果：

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网