vue父组件监听子组件data

Log笔记

已于 2022-09-21 13:54:41 修改

阅读量1.8k

点赞数 2

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

于 2022-09-20 16:28:37 首次发布

本文链接：https://blog.csdn.net/qq_41169990/article/details/126952503

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

子组件需设置ref

<template>
    <div>
        <!-- 子组件 -->
        <child-component ref="childRef"></child-component>
    </div>
</template>

js代码段，引入子组件，因为data属于函数所以这里边必须用函数方式监听，另外子组件data内对象赋值需用set方式赋值，否则监听不到

<script>
import childComponent from './childComponent.vue'
export default {
  components: {
    childComponent
  },
 mounted(){
      this.$nextTick(() => {
          // 拿取子组件data
          const useData = this.$refs.childRef.$data
          // 监听
          this.$watch(() => {
            return useData
          },(val) => {
            console.log(val)
          },{deep:true})
      })
   }
}
</script>

注: 子组件内，触发监听条件

data(){
    return{
        formData:{
            age: ''
        }
    }
},
mounted(){
    this.formData.name = '张三' // 不会触发监听
    this.$set(this.formData, 'name', '张三') // 会触发监听
    this.formData.age = '20' // 会触发监听
}