组件之间的传值

父组件通过 Prop 向子组件传递数据

一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。在上述模板中，你会发现我们能够在组件实例中访问这个值，就像访问 data 中的值一样。

父组件中将需要传递的数据 通过 v-bind: (或 : ) 绑定，如下 :msg-val=“scope.row”

<DeleteButton
  class="deleteButton"
  :msg-val="scope.row"
  @deleId="deleteById"
></DeleteButton>

子组件通过 props 接收 父组件传来的值

  props: {
    msgVal: {
      type: Object,
      required: true
    }
  },

注意：子组件不能修改父组件的值。如果要修改，应向父组件传递一个事件，让父组件修改。

父子组件传值时生命周期顺序

父组件在给子组件传值的时候为什么子组件的生命周期中没有办法直接取到父组件的参数?与父子间的生命周期顺序有关。

如果有嵌套组件，父子组件的生命周期的执行顺序是什么？

当父子组件在加载的时候，执行的先后顺序为

父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted

父组件先于子组件created，而子组件先于父组件mounted

子组件更新：父beforeUpdate->子beforeUpdate->子updated->父updated

父组件更新过程：父beforeUpdate->父updated

销毁：父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

父组件 获取异步数据 还没等到数据返回 子组件 created已经执行完毕

prop 传值的注意点

1. 这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。 在这种情况下，最好定义一个本地的 data property 并将这个 prop 用作其初始值：

   props: ['initialCounter'],
   data: function () {
     return {
       counter: this.initialCounter
     }
   }
   

2. 这个 prop 以一种原始的值传入且需要进行转换。 在这种情况下，最好使用这个 prop 的值来定义一个计算属性：

   props: ['size'],
   computed: {
     normalizedSize: function () {
       return this.size.trim().toLowerCase()
     }
   }
   

父组件监听子组件事件

通过 emit 实现监听

有的时候用一个事件来抛出一个特定的值是非常有用的。这时可以使用 $emit 的第二个参数来提供这个值

    removeData () {
      // 可以获取父组件的值传递的值
      // 拿到要删除的id
      var deleId = this.msgVal.id
      this.$emit('deleId', deleId)
      this.deleteVisible = false
    }

父组件通过 v-on:(或 @ ),可以接收子组件抛出的值。

    <DeleteButton
    class="deleteButton"
    :msg-val="scope.row"
    @deleId="deleteById"
    ></DeleteButton>

在 methods 中我们可以写：

methods: {
    deleteById (val) {
        //  我们要的具体操作，其中 val 是子组件传递给父组件的值
        console.log(val);
        ......
    }
}

父组件直接调用子组件方法

父组件可以通过ref直接调用子组件的方法或属性：

调用子组件方法，在created 和 mounted 阶段，如果需要操作渲染后的视图，要使用 nextTick 方法。因为mounted不会承诺其子组件也挂载完毕

mounted () {
    this.$nextTick(() => {
      // 调用 lineChart 方法获取数据
      this.$refs.lineChart.getdata()
    })
  }

vue 父子组件传值不能实时更新

vue父子组件传值不能实时更新问题，父组件将值传给了子组件，但子组件显示的值还是原来的初始值，并没有实时更新，为什么会出现这种问题呢？

原因：

1. 父组件没有把值传过去，子组件没有获取到最新的值。
2. 子组件接收到最新的值了，但是没有实时渲染到视图上。

针对第一种情况，核对传的参数，确保把最新的值传过去。

针对第二种情况，主要有两种解决方案：

1. 利用 v-if 的重新渲染机制，获取到值之后，将子组件重新渲染一遍。
2. 利用 watch 监听数据，若是数据变化，调用视图渲染方法。

如果遇到一个页面调用多个组件的情况，使用 v-if 就会很繁琐。

这里就会采用第二种方法，设置 watch 监听，监听我们传的值，当子组件监听到数据发生改变时，调用方法渲染视图。

  // 接收父组件传来的数据
  props: {
    tableData: {
      type: Object
    }
  },
  // 监听父组件传来的数据，当数据改变，重新渲染视图
  watch: {
    tableData (newVal, oldVal) {
      // console.log('newVal', newVal);
      // console.log('oldVal', oldVal);
      this.tabledata = newVal
      this.initChart()
    }
  },