一.App.vue是父组件,UserComponent.vue是子组件
1.App.vue的代码
<template>
<div>
<!-- CustomEvent 这个自定义事件是发生在<UserComponent>组件中的,所以
CustomEvent事件的触发代码需要在UserComponent.vue中编写-->
<UserComponent v-on:CustomEvent="alert666"></UserComponent>
</div>
</template>
<script>
import UserComponent from "./components/UserComponent.vue";
export default {
name: "App",
components: {
UserComponent,
},
methods: {
alert666: function () {
alert("666");
},
},
};
</script>
<style>
</style>
注意点:
CustomEvent 这个自定义事件是发生在<UserComponent>组件中的,所以
CustomEvent事件的触发代码需要在UserComponent.vue中编写
2.UserComponent.vue的代码
<template>
<div>
<!-- triggerCustomEvent 点击按钮后,对App.vue组件的CustomEvent事件进行‘怎么触发’的定义-->
<button v-on:click="triggerCustomEvent">出发CustomEvent事件</button>
</div>
</template>
<script>
export default {
name: "UserComponent",
data: function () {
return {
msg: "你好",
};
},
methods: {
triggerCustomEvent() {
//
this.$emit("CustomEvent");
},
},
};
</script>
注意点:
methods: {
triggerCustomEvent() {
//
this.$emit("CustomEvent");
},
},
自定义组件的方法。这里定义了一个名为triggerCustomEvent
的方法,当调用这个方法时,会使用this.$emit
触发一个名为CustomEvent
的事件。这个事件可以被组件的父组件监听到,从而执行一些操作。(this是UserComponent这个组件的对象VC,this.$emit
是一个实例方法,用于子组件向其父组件发送自定义事件的通知。这是组件之间通信的一种方式,特别是在父子组件之间)
二.大体流程图
二.自定义组件还可以向父组件传递数据(开发常用)
1.先看子组件UserComponent.vue的普通传递数据的写法
methods: {
triggerCustomEvent() {
//这里还可以传递数据到父组件,如传一个张三,23岁的数据,数据的接收是在回调函数的参数上接收
this.$emit("CustomEvent", this.name, this.age);
},
},
在这段代码中,this.$emit("CustomEvent", this.name, this.age);红色标识的就是要传递到父组件的数据,这些数据通常来源于(后台Java响应过来的数据)数据库,这里只简单来源于data配置项
data配置项数据(组件中的data配置项return回去的必须是一个对象,不能是一个函数)
data: function () {
return {
msg: "你好",
name: "张三",
age: 23,
};
},
2.App.vue中接收子组件UserComponent传过来的参数
methods: {
// alert666()回调函数接收子组件传过来的数据
alert666: function (name, age) {
console.log(name, age);
alert("666");
},
},
这里是用参数的接收,使用自然是在方法体中使用