<template>
<div>
<!-- 内置函数的实现步骤 -->
<!-- 提供事件源,给事件源绑定事件,编写回调函数,将回调函数和事件进行绑定 -->
<!-- 等待事件的触发,事件触发执行回调函数 -->
<!-- 组件的自定义事件实现步骤 -->
<button @click="Hello()">你好</button>
<!-- 给User组件绑定自定义事件 -->
<!-- 全称写法v-on:事件名称简写为@事件名 -->
<!-- 对于组件自定义事件来说,要想让事件发生,就需要执行一段代码 -->
<!-- 这段代码负责触发这个事件,让这个事件发生 -->
<!-- 这个事件绑定在这个VC上 -->
<User v-on:event1="doSome" @event2="doOther"></User>
<!-- 简写形式 -->
<!-- 事件绑定在哪个组件上,触发事件的代码就在哪个组件上编写 -->
<User @event1="doSome" @event2="doOther"></User>
<!-- 总结到目前,父子组件如何通信 -->
<!-- props传值(父组件向子组件),自定义事件(子组件向父组件) -->
<!-- 在父组件中定义一个方法,将方法传递给子,然后在子组件中触发这个方法,并传递参数 -->
<!-- 第二种方法,也是更常用的,使用组件自定义事件的方式,也可以完成子向夫传数据 -->
<!-- 在父组件绑定事件,在子组件触发事件 -->
<!-- 子组件传递父组件是,父组件绑定,子组件触发(父绑定,子触发) -->
<User ref="user"></User>
</div>
</template>
<script>
import User from "./components/User.vue"
export default {
name : "App",
components : {User},
mounted(){
// 获取组件
// 给ref=user的组件绑定event1事件,并且给event1这个事件绑定一个回调函数doSome()
this.$refs.user.$on("event1",this.doSome);
this.$refs.user.$on("event2",this.doOther);
// 仅一次的设置方式
// this.$refs.user.$once("event1",this.doSome);
},
methods : {
Hello(){
console.log("Hello Vue");
},
// doSome(name,age,gender){
// console.log(name,age,gender)
// }
// 不确定个数,后期拓展写法
// 仅限ES6的新语法...params
doSome(name,...prams){
console.log(name,prams);
},
doOther(){
console.log("doOther");
}
}
}
</script>
<style>
</style>
<template>
<div>
<button @click="triggerEvent1()">触发event1事件</button>
<button @click="triggerEvent2()">触发event2事件</button>
<button @click="unbinding">解除绑定</button>
<!-- vue实例销毁的时候,会把我们实例上绑定的事件全部解绑 -->
<button @click="goodbye()">销毁VUE实例</button>
</div>
</template>
<script>
export default {
name : "User",
methods : {
triggerEvent1(){
// 触发事件的方法
// 代码意思是触发event1这个事件
// this是当前的组件实例
// $emit就是触发爆发
this.$emit('event1',this.name,this.age,this.gender);
},
triggerEvent2(){
this.$emit("event2");
},
// 解除绑定
unbinding(){
// 仅仅解绑this绑定的event1事件
// this.$off('event1');
// 全部解绑写法
// this.$off();
// 解绑多个写法
this.$off(["event1","event2"]);
},
goodbye(){
// 销毁完,全部的绑定效果全部失效
this.$destroy();
}
},
data(){
return {
name : "张三",
age : 20,
gender : "男"
}
}
}
</script>
<style>
</style>
