data为什么是函数及父子组件通信及访问

9.组件中的数据存放

• 数据存放在data中，它必须是个函数，且返回一个对象

• 为什么data必须是个函数

  • 不是函数的话，每个组件的data都是内存的同一个地址，一个数据改变，其他数据也会改变，
  • 当data是一个函数的时候，每一个实例的data属性都是独立的，不会相互影响(数据独立)

10.父子组件通信(传数据)

10.1父传子：props

• 在子组件中使用props接收，使用v-bind绑定父组件传递的数据
• props中可以使用数组或对象，一般对象使用得比较多
  • 使用对象，可以对父组件传递的数据进行限制，使用type限制类型，default设置默认值，required:true/false设置是否必须传入

<cpn :c-info="info"></cpn>
//子组件
props: {
  cInfo: {
    type: Object,
      default () {
        return {};
      },
  },
},
//父组件
data: {
  info: {
    name: 'liux',
    age: 18,
    height: 188,
  },
},

10.2子传父，自定义事件

• 在子组件中，methods中通过$emit()来触发事件
• 在父组件中，通过v-on来监听子组件事件

<cpn @item-click="cpnClick"></cpn>

methods: {
  btnClick(item){
    //这是一个自定义事件
    //发射给父组件   'itemClick'事件名称 item 传的参数
    this.$emit('item-click',item);
  }
},
  
methods: {
  cpnClick(item){
  	console.log(item);
  }
},

10.3父子通信中input双向绑定问题

• 使用双向绑定时，v-model不能直接绑定子组件props中的数据，应该绑定在子组件data中(data中的数据指向props中的数据)
• 此时input中改变的值是data中的值，而props中的值是父组件传递过来的，并没有改变
• 所以子组件需要通过自定义事件**$emit()**将最新值发送给父组件，父组件监听事件进行接收数据
• 使用watch监听某个属性的改变

<input type="text" :value="dnumber1">
<input type="text" :value="dnumber2">
data: {
  num1: 1,
  num2: 0
},
methods: {
  num1change(value) {
   	this.num1 = parseFloat(value)
   },
  num2change(value) {
  	this.num2 = parseFloat(value)
  }
},
  
cpn: {
  template: '#cpn',
  props: {
    number1: Number,
    number2: Number
  },
  data() {
    return {
      dnumber1: this.number1,
      dnumber2: this.number2
    }
  },
  watch: {
    dnumber1(newValue) {
      this.dnumber2 = newValue;
      this.$emit('num1change', newValue);
    },
    dnumber2(newValue) {
      this.dnumber1 = newValue;
      this.$emit('num2change', newValue);
    }
   }
  }
}

11.父子组件访问(调方法)

11.1父访子：$refs用最多

• $children：数组类型，用得比较少

• $​​refs：对象类型，默认空对象，要在组件上加属性ref=""，这相当于key

11.2：子访父：用得少

• $parent：访问父组件
• $root：访问根组件