Vue--组件自定义事件

绑定

实现以下功能：调用App的方法，将其组件的信息打印到控制台，有三种实现方式。

props

现将函数利用props传给组件，组件调用方法，来将组件内的信息传到App的方法并打印输出。

App

<div>
  <!--通过props传递-->
  <Student :getStudentName="getStudentName" />
</div>

methods: {
  getStudentName(name) {
    console.log("App接收到了", name);
  },
}

Student组件

<div class="demo">
  <button @click="getName">点击我执行方法</button>
</div>

<script>
export default {
  name: "StudentList",
  props: ["getStudentName"],
  data() {
    return {
      name: "野原新之助",
    };
  },
  methods: {
    getName() {
      this.getStudentName(this.name);
    },
  },
};
</script>

自定义事件

通过自定义事件，来为Family组件绑定事件，类似于之前自带的click事件

App

<div>
  <!--通过绑定事件-->
  <!-- <Family v-on:fair="getFamilyName" /> -->
</div>

//如果有多个数值，形参可以变为(name,...a)，其中a为变量名，这样，穿过来的多个数值会以数组的形式传进该方法
getFamilyName(name) {
  console.log("App接收到了", name);
},

Family组件

<div class="demo">
  <button @click="getFName">点击我执行方法</button>
</div>

methods: {
  getFName() {
  //一旦点击则触发fair事件,这里的this.name为传递的信息
  //后面还可以增加多个传递的数值
    this.$emit("fair", this.name);
  },
}

ref

ref相对复杂，但是优点是灵活性强，如可以设置计时器，等待时间后才进行事件绑定

App

<div>
  <Family ref="familyName" />
</div>

mounted() {
  setTimeout(() => {
    //想执行一次就将$on改为$once
    this.$refs.familyName.$on("fair", this.getFamilyName);//回调需要在methods里面或者利用见图函数，因为箭头函数没有this，会向外找到mounted。
    //而如果用function，则会导致找到的this是组件实例对象VC,从而没有相应方法
  }, 3000);
}

Family

<div class="demo">
  <button @click="getFName">点击我执行方法</button>
</div>

```javascript
methods: {
  getFName() {
    this.$emit("fair", this.name);
  },
}

解绑

<div class="demo">
  <button @click="getName">点击我执行方法</button>
  <button @click="unbind">点击我解绑方法</button>
</div>

methods: {
  getName() {
    this.getStudentName(this.name);
  },
  unbind() {
    //单个解绑直接传，多个解绑需要用数组包裹，或者直接用$off()暴力解绑
    this.$off(); //单个
    //多个  this.$off(['a','b'])
    //暴力解绑  this.$off()
  },
}

或者是直接用this.$destroy将组件内的vm或者vc销毁，这样绑定的事件就没了，但是方法也没了，因为是整个实例对象销毁，但是一些原生的js仍然可以执行。

注意：:xxx="xxx"是要传入计算而不是想返回数据的时候，不可改为@，只能是方法的时候，才能绑定事件
查看绑定事件执行的方法：打开Vue开发者工具，点击Timeline->Component events，偏右侧的框里会显示。