【VUE】个人记录：父子页面数据传递

1. 父传子

在父页面中，调用子页面的组件位置处，通过“：”进行参数传递

<child-component :childData="parentData"></child-component>

parentData对象，需要在父页面的data中进行初始化声明

在子页面中，需要在props中，承接该对象

props: {
    childData: {
      type: Array,
      default: () => [],
    },
}

然后在子页面中，可以通过this.childData使用父页面传递过来的数据
注意：在子页面中props中声明的对象，在data中不要重复声明了，否则就会报错，如果需要在组件内部使用或者修改父页面传值，应该在data中使用赋值，例如

 data() {
    return {
    	myChildData:this.childData
    }
 }

2. 子传父

子页面没有办法直接给父页面的参数赋值，子页面向父页面传值的方式为调用父页面的函数，将需要传递的数据放到父页面函数的参数中
子页面添加方法：

methods: {
	  //向父页面传数据 $emit向父页面传数据的方法
      childToFather: function() {
        const vm = this;
        vm.$emit('getChildData', this.data);
      },
  }

父页面添加方法：

methods: {
	  //向父页面传数据 $emit向父页面传数据的方法
      getChildData: function(data) {
        this.fatherData = data//用子页面的数据，修改父页面的数据
      },
  }

3. A子传B子

假设父页面F有两个子页面的组件A和B，A和B之间需要相互传参，假设A要给B传递数据，那个区分两个过程，分别取名：AToF和FToB。

其中，AToF,使用子页面通过$emit方法，将A的值给父页面传递过去，然后在FToB的过程中，通过props属性中的对应值，将数据传给B页面。