『VUE』24. 组件事件之子组件传递数据给父组件（详细图文注释）

embedded/2024/11/14 12:39:47/

测试回调函数

子组件中@click="clickEventHandle",通过this.$emit("someEvent");表示在父组件的someEvent方法中可以使用子组件的数据
父组件中<ComponentEventSon @someEvent="GetHandle" />来调用子组件,这里的@someEvent而不是传统的@click,在GetHandle()方法中可以调动子组件的数据.

ComponentEvent.vue

<template><h3>组件事件父节点</h3><ComponentEventSon @someEvent="GetHandle" />
</template><script>javascript">
import ComponentEventSon from "./ComponentEventSon.vue";export default {components: {ComponentEventSon,},methods: {GetHandle() {//@someEvent="GetHandle"使得GetHandle方法内可以拿到子组件的回调数据console.log("准备接收其他组件数据");},},
};
</script>

ComponentEventSon.vue

<template><h3>组件事件子节点</h3><button @click="clickEventHandle">接收其他组件数据</button>
</template><script>javascript">
export default {methods: {clickEventHandle() {//自定义事件this.$emit("someEvent");//自定义事件和数据//   this.$emit("someEvent", "需要传递给父组件的数据");},},
};
</script>

在这里插入图片描述

使用回调函数拿到数据

this.$emit(“someEvent”, this.message);中someEvent是表示父组件用什么属性绑定回调方法,this.message是要传给父组件的数据

ComponentEventSon.vue

<template><h3>组件事件子节点</h3><button @click="clickEventHandle">接收其他组件数据</button>
</template><script>javascript">
export default {data() {return {message: "需要传递给父组件的数据",};},methods: {clickEventHandle() {//自定义事件//   this.$emit("someEvent");//自定义事件和数据this.$emit("someEvent", this.message);},},
};
</script>

ComponentEvent.vue

<template><h3>组件事件父节点</h3><ComponentEventSon @someEvent="GetHandle" /><div>{{ message }}</div>
</template><script>javascript">
import ComponentEventSon from "./ComponentEventSon.vue";export default {data() {return {message: "",};},components: {ComponentEventSon,},methods: {// 前面 this.$emit("someEvent", "需要传递给父组件的数据");// data就是"需要传递给父组件的数据"GetHandle(data) {//@someEvent="GetHandle"使得GetHandle方法内可以拿到子组件的回调数据console.log("准备接收其他组件数据");this.message = data;console.log("this.message", this.message);},},
};
</script>

在这里插入图片描述

黄色警告的解决

在这里插入图片描述
在子组件export default添加 emits: ["someEvent"],

<template><h3>组件事件子节点</h3><button @click="clickEventHandle">接收其他组件数据</button>
</template><script>javascript">
export default {emits: ["someEvent"],data() {return {message: "需要传递给父组件的数据",};},methods: {clickEventHandle() {//自定义事件//   this.$emit("someEvent");//自定义事件和数据this.$emit("someEvent", this.message);},},
};
</script>