[Vue] 子组件用 props 获取父组件数据，并用 watch 解决动态数据不生效问题

父组件用 v-bind 传值、子组件用 props 接收。但当父组件数据是 axios 异步获取的动态值时，子组件不会更新——用 watch 监听 props 即可解决。

父子组件传值在 Vue 官方文档里写得很清楚：父组件用 v-bind 绑定传送，子组件用 props 接收即可。

父组件通过 v-bind 绑定数据：

<template>
  <router-view :yourdata="yourdata"></router-view>
</template>
<script>
export default {
  data: function() {
    return { yourdata: "这是一段测试文字。" }
  }
}
</script>

子组件用 props 接收：

<template>
  <div>{{ yourdata }}</div>
</template>
<script>
export default {
  props: ['yourdata']
}
</script>

但是，如果父组件的 yourdata 是动态数据（比如用 axios 异步请求回来的），子组件里这个数据不会随之变更，这时就要用到 watch：

<template>
  <div>{{ newdata }}</div>
</template>
<script>
export default {
  data: function(){
    return { newdata: "" }
  },
  props: ['yourdata'],
  watch: {
    yourdata: function (newVal, oldVal) {
      this.newdata = newVal; // newVal 即获取到的动态新数据，赋值给 newdata
    }
  }
}
</script>