vue父子组件通信

父子组件通信

父组件

<div id="prop-example-2">
  <child :string="string" :obj="obj" :name.sync="name" @changString="changString"></child>
</div>

注意在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。
数据分为引用类型和基本类型，基本类型的数据只有在父组件中才能改变，引用类型的可以在任何地方改变。在vue数据传递中，Object和Array为引用类型，String，Number，Boolean为基本类型，想理解的更清楚，建议去看下我的这篇博客js基本类型和引用类型

new Vue({
  el: '#prop-example-2',
  data: {
     string: '基本类型数据--只能在父组件中修改',
     obj: {tips: '父子组件都可以修改，且不需要显示提交，各个组件都会响应修改'},
     name: '加sync修饰符，可以从子组件显示提交修改'
  },
  methods: {
     // 子组件提交事件告诉要进行更改
    changString (newString) {
        this.string = newString
    }
  }
})

子组件

Vue.component('example', {
  // 接收数据
  props: {
    string: String,
    arr: Array,
    name: String
  },
  methods: {
      changeString () {
        // 会提交一个changString事件，这时需要在父组件上监听此事件
        this.emit('changString', 'string的最终值')
      },
      changeName () {
        //  显示的提交name，不需要再去父组件上监听然后再去改变name的值，vue会帮我们做了这个过程
        this.$emit('update:name', newName)
      },
      //  引用类型
      changeArr () {
        obj.tips = '不需要任何处理就直接改了'
      }
  }
})

上面是对已存在的值进行修改，如果在对象中要添加/删除新的键值对，就应该进行全局注册

vm.$set( target, key, value )
vm.$delete( target, key )

对于数组，在对其操作时，最好了解一下vue提供的变异方法（对数组的一些方法进行了包装，也就是对data里的那些数组的prototype上的一些方法重写，注意，没改变Array对象的方法），以便view对做出反应，变异方法有如下几种

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

props验证规则请移步官网props验证