详细讲解vue2组件通信(二)——子传父自定义事件

理论基础

我们来思考一下，
1. 在js中函数是不是可以设置形参？在调用函数时，给它传实参，从而在函
数内部中，可以使用我们传入的实参值？答案为是的，大家都很清楚这一点。
2. 那如果在父组件中有一个函数，可以让其在子组件中调用，是不是可以在子
组件中调用这个函数时，将我们需要传递给父组件的数据作为参数传入，从而
实现子传父这种组件通信？答案我告诉大家，是的。

实际操作

父传子自定义函数

父组件给子组件传递一个变量为"clg"的自定义函数，并将这个函数变量名的实体执行
自己组件的fnc方法

<template>
  <div>
      <Son @clg="fnc"></Son>
  </div>
</template>

<script>
import Son from "./components/Son.vue";
export default {
  name: "App",
  components: {
    Son,
  },
  methods:{
      fnc(value){
         console.log(value) 
      }
  }
};
</script>

<style scoped>
</style>

子组件调用自定义函数

方式1

我们想调用一个函数，我们当然是想着去找这个函数在哪？那这个函数在哪呢？
首先这个函数是在父组件中定义的，所以父组件实例对象上肯定有，那么问题
来了，我们怎么拿到父组件呢？在vue中可以通过子组件实例对象.$parent拿到父
组件，那么在子组件中通过this.$parent.fnc()可以调用吗？

mounted(){
    console.log(this);
    this.$parent.fnc(1);
}

方式2

第二种我来告诉大家一个vue知识点，父组件传递给子组件的方法都会被存在子组件实例对象的$listeners属性身上，因此我们尝试使用this.$listeners.clg()来调用

mounted() {
	 console.log(this);
	 this.$parent.fnc(1);
	 this.$listeners.clg(2);
},

方法3

在子组件的实例对象.__proto__.__proto__身上有一个$emit()方法，这是vue官方为
我们提供的api。第一个参数为String,自定义事件的变量名。后面的参数都是这个
自定义事件的实参。当然我们调用的时候不用这么麻烦，直接实例对象.$emit()就行了，
因为js原型链查找机制会自动帮我们顺着原型链去查找值。

mounted() {
	    console.log(this);
	    this.$parent.fnc(1);
	    this.$listeners.clg(2);
	    this.$emit("clg", 3);
	    console.log(this.__proto__.__proto__);
}

引用数据类型超出的一个现象

不知道大家对于js的基本数据类型和引用数据类型了解多少，后续博主会在js专栏和大家
一块讨论一下js的基本数据类型和引用数据类型。在此简单为大家介绍一下两者的区别。
在js中的引用数据类型包括数组，对象。当我们把引用数据类型数据传递给函数时，在函
数内部通过对象.属性修改值，会通过引用关系改变原始的数据。而基本引用类型数据不会。
所以如果当子组件中的状态数据传递给父组件的自定义函数并且在函数内部修改时（不打破
引用关系），会同步改变子组件的状态数据。

代码演示

<template>
  <div>
    <Son @clg="fnc" @obj="fn"></Son>
  </div>
</template>

<script>
import Son from "./components/Son.vue";
export default {
  name: "App",
  components: {
    Son,
  },
  methods: {
    fnc(value) {
      console.log(value);
    },
    fn(obj) {
      obj.a = 2;
    },
  },
};
</script>

<style scoped>
</style>

<template>
<div>
  <div>Son</div>
<div>{{obj}}</div>
</div>
</template>

<script>
export default {
  name: "web-son",
  data(){
      return {
          obj: {
              a:1,
              b:2
          }
      }
  },
  mounted() {
    console.log(this);
    this.$parent.fnc(1);
    this.$listeners.clg(2);
    this.$emit("clg", 3);
    console.log(this.__proto__.__proto__);
    this.$emit("obj",this.obj)
  },
};
</script>

<style scoped>
</style>