阅读 100

vue slot 父子组件通信(日常记录)

vue slot 父子组件通信

父子插槽通信

可以理解为在定义组件的时候预先留好了一个插槽,父组件在调用子组件的使用将东西插到插槽里面显示,或者说从外向里读。

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

//子组件 testChild
<div>
    <h4>子组件</h4>
    <slot></slot> //default slot
</div>
复制代码

结果如下

父组件
子组件
默认插槽

父向子通信

其实就是读取父里面data的内容

/* 父组件 
* list: [
*    {name: "aaa"}, {name: "bbb"}
* ]
*/

<div>
        <h3>父组件</h3>
        <testChild>
            <template v-slot:test>//v-slot: + 插槽名 v-slot:default 也是允许的
                <ul>
                    <li v-for="item in list">{{item.name}}</li>
                </ul>
            </template>
        </testChild>
    </div>

//子组件 textChild
 <div>
        <h4>子组件</h4>
        <slot name="test"></slot> //name="插槽名"
</div>
复制代码

结果如下

父组件
子组件

  • aaa
  • bbb

子向父通信

父组件无法直接访问子组件里面的变量

//父组件 
 <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>
复制代码

结果如下

父组件
子组件

  • ccc
  • ddd

name

关注下面的标签,发现更多相似文章
评论