『VUE』25. 组件事件与v-model（详细图文注释）

2025/4/24 23:23:45 来源：https://blog.csdn.net/u011027547/article/details/136885728 浏览: 次关键词：『VUE』25. 组件事件与v-model（详细图文注释）

功能介绍

预期拿到一个输入搜索框,用户在搜索框中输入数据后实时把数据发送给父组件使用.
在这里插入图片描述

示例

主要是对前面的v-model和watch的结合使用,实现获取更新的子组件的数据并发送给父组件

最终效果是每一次搜索框输入数据都会传递数据,类似百度搜索每次你输入都会更新推荐搜索的内容.
在这里插入图片描述

SearchComponent.vue

<template><h3>SearchComponent</h3>搜索:<input type="text" v-model="message" />
</template><script>
export default {emits: ["SearchEvent"],data() {return {message: "",};},methods: {clickEventHandle() {},},watch: {message(NewData, OldData) {this.$emit("SearchEvent", NewData);},},
};
</script>

Main.vue

<template><h3>Main</h3><div>得到的子组件搜索内容:{{ message }}</div><br /><h3>----------------------</h3><SearchComponent @SearchEvent="GetSearch" />
</template><script>
import SearchComponent from "./SearchComponent.vue";export default {data() {return {message: "",};},components: {SearchComponent,},methods: {// 前面 this.$emit("someEvent", "需要传递给父组件的数据");// data就是"需要传递给父组件的数据"GetSearch(data) {console.log("准备接收其他组件数据");this.message = data;console.log("搜索内容为:", this.message);},},
};
</script>

App.vue

<template><!-- <GlobalHeader /><Main /><Aside /> --><!-- <Parent /> --><!-- <ComponentEvent /> --><Main />
</template><script>
// import Header from "./page/Header.vue";
// import Main from "./page/Main.vue";
// import Aside from "./page/Aside.vue";
// import Child from "./components/Child.vue";
// import Parent from "./components/Parent.vue";
// import ComponentEvent from "./components/ComponentEvent.vue";
// import ComponentEventSon from "./components/ComponentEventSon.vue";
import Main from "./components/Main.vue";export default {components: {// Header,// Main,// Aside,// Child,// Parent,// ComponentEvent,// ComponentEventSon,Main,},
};
</script><style scoped></style>