vue子组件监听父组件传值

父组件通过 props传值给子组件，当父组件传值发生了变化，我们期望子组件数据相应进行变化。方法较多，我们一一介绍。

先写一个简易的父组件

// 父组件template内容
<button @click="addData">addDataButton</button>

// 引用的子组件内容
<data-list-item :dataList="dataList"></data-list-item>

// 父组件data中定义内容
dataList: [],

// 父组件methods内容
addData() {
  this.dataList.push({
    name: this.dataList.length,
  })
}

再写一个简易的子组件

// 子组件template内容
<ul>
  <li></li>
</ul>

// 子组件props中内容
props: ['dataList'],

props

直接使用父组件传递的props变量

// 子组件template内容
<ul>
  <li v-for="(list, index) in dataList" :key="index">{{ list.name }}</li>
</ul>

我们可以看出来随着父组件数据的变化，props传递的字段dataList值动态变化。但这样存在一个弊端，就是在子组件中无法根据各类条件进一步处理传递的数据，所以我们更倾向于下一种。

data

将props中的值赋给data中定义的变量

// 子组件template内容
<ul>
  <li v-for="(list, index) in childDataList" :key="index">{{ list.name }}</li>
</ul>

// 子组件data中定义内容
childDataList: this.dataList,

在vue调试工具中我们可以轻易看到，当我们点击按钮，props中的值进行相应变化，同时data中定义的变量值也同步变化。

computed

如果父组件传递的值，在给定的初始条件即可完成数据的处理，那我们可以使用computed

// 子组件template内容
<ul>
  <li v-for="(list, index) in childDataList" :key="index">{{ list.name }}</li>
</ul>

// 子组件computed中定义内容
 childDataList() {
   return this.dataList
 },

在vue调试工具中我们可以轻易看到，当我们点击按钮，props中的值进行相应变化，同时computed中定义的变量childDataList也同步变化。

watch

采用watch监听父组件传值也是常用的方法。
watch可以直接监听变化的传值类型为基本数据类型，引用数据类型可以监听Array，但是对引用数据类型中 instanceOf 为 Object监听则不是很理想，需要使用watch中的深度监听。

普通监听

// 子组件template内容
<ul>
  <li v-for="(list, index) in childDataList" :key="index">{{ list.name }}</li>
</ul>

// 子组件data中定义内容
childDataList: [],

// 子组件watch中定义的内容
dataList(val) {
 console.log('dataList change', val)
  this.childDataList = val
},

可以看到随着父组件按钮的点击，子组件对父组件的传值监听会执行，同时改变子组件data中定义的childDataList值。这种方式的问题是，如果一开始父组件即传值过来，而watch是监听到变化才执行，则导致子组件无初始值。可以采用下面深度监听的写法，开启immediate为true。

深度监听

修改下之前的父组件和子组件内容

// 父组件template内容修改
 <button @click="changeData">changeDataButton</button>
 <data-list-item :dataObj="dataObj"></data-list-item>

// 父组件data内容修改
dataObj: {
  name: 'caoyuan',
  age: 24,
  sex: 'man',
},

// 父组件methods内容修改
 changeData() {
   this.dataObj.name = this.dataObj.name + Math.random()
 },

// 子组件template内容修改
<div>
  {{ personalInfo.name }}
</div>

// 子组件data内容修改
personalInfo: {},

// 子组件props修改
props: ['dataObj'],

// 子组件watch修改
watch: {
  dataObj: {
    handler(val) {
      console.log('dataObj deep change', val)
      this.personalInfo = val
    },
    deep: true, // 深度监听
    immediate: true, // 初次监听即执行  
  },
},

通过上面的方式，即可解决watch监听带来的一些问题

优化watch监听

若是只对object中特定字段进行监听，则可以采用下面方式

watch: {
  'dataObj.name': {
    handler(val) {
      console.log('dataObj.name change', val)
      this.personalInfo = this.dataObj
    },
    immediate: true, // 初次监听即执行  
  },
},

这种方式消除深度监听对性能的消耗