子组件相互传值

呜啦吧哈

已于 2022-04-08 14:52:09 修改

阅读量1.4k

点赞数 2

分类专栏：前端文章标签：前端 vue

于 2022-04-08 14:50:49 首次发布

本文链接：https://blog.csdn.net/sinat_34479648/article/details/124040324

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、父组件中转

内涵：子1 传父 ——父传子2

父：传递布尔值openComment

<template>

<child1 :open-comment.sync="openComment"</child1>
<child2 :open-comment.sync="openComment"></child2>

</template>

import child1 from "../child1"
import child2 from "../child2"

export default{
    name:'father',
    components:{
    child1,
    child2
    },
    data(){
      return {
        openComment:false
            }
    }

}

子1：接收并向父传递布尔值openComment

<template>

<div>
  <el-dialog :visible.sync="open"
             @close="$emit('update:openComment',false)"
             :close-on-click-model='false'>
    <div>弹窗内容</div>
  </el-dialog>
  
</div>

</template>

export default{
    name:'child1',
    props:{
      openComment:{
        type: Boolean,
        default:false
        }
    },
    data(){
      return{
        open:false,
        }
    },
    watch:{
        openComment(val){
          console.log(val)
        }
    },
    methods:{

    }

}

子2：接收传值openComment

<template>


</template>

export default{
    name:'child2',
    props:{
      openComment:{
        type: Boolean,
        default:false
        }
    },

    watch:{
        openComment(newV,oldV){
          console.log(newV,oldV)//观察传值变化
        }
    },
    methods:{

    }

}