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>