Vue父子组件传值，使用watch监听值变化

父组件往子组件传值
组件传值
一、在父组件中引入子组件
二、在父组件中定义data值
三、给子组件绑定属性值
四、子组件中定义props
watch监听值变化
代码
子组件往父组件传值
组件传值
父组件往子组件传值

组件传值

一、在父组件中引入子组件

<test :obj="obj" v-if="show"/>

import test from './test/test'

export default {
  components: { 
    test
   }
 }

 

二、在父组件中定义data值

data () {
    return {
      show: false, // 控制子组件显示
      obj: {
        name: ''
      }
    }
  }

三、给子组件绑定属性值

<test :obj="obj" v-if="show"/>

四、子组件中定义props

export default {
  props: {
    obj: Object
  }
}

子组件watch监听值变化

//定义一个watch监听，可以监听父组件值的变化，获取到值，
//假如父组件这边是一个下拉框，每次下拉的时候传参到子组建，子组建监听到变化之后取到值
watch:{ 
    obj:{
      handler(n,o){
        console.log('echarts子组件中的参数： ' + n)
        this.company_id = n //赋值给data
      },
      deep:true// 深度监听父组件传过来对象变化
    }
  },

代码

父组件

<template>
  <div>
    <button @click="controlShow(true)">显示子组件</button>
    <button @click="controlShow(false)">隐藏子组件</button>
    <button @click="testName('aaa')">子组件传值aaa</button>
    <button @click="testName('bbb')">子组件传值bbb</button>
    <test :obj="obj" v-if="show"/>
  </div>
</template>

<script>
import test from './test/test'

export default {
  name: 'HelloWorld',
  components: { 
    test
  },
  data () {
    return {
      show: false, // 控制子组件显示
      obj: {
        name: ''
      }
    }
  },
  methods: {
    testName (e) {
      this.obj.name = e
    },
    controlShow (e) {
      this.show = e
    }
  }
}
</script>

<style scoped>
</style>

 

子组件

<template>
  <div>
    <h1>我是子组件！！！</h1>
    name值为：{{obj.name}}
  </div>
</template>

<script>
export default {
  name: 'test',
  props: {
    obj: Object
  },
  data () {
    return {
    }
  },
  watch: {
    obj: {
      handler (n, o) {
        console.log('子组件中的name值： ' + n.name)
      },
      deep: true // 深度监听父组件传过来对象变化
    }
  }
}
</script>

<style scoped>
</style>