目录
功能介绍
预期拿到一个输入搜索框,用户在搜索框中输入数据后实时把数据发送给父组件使用.
示例
主要是对前面的v-model和watch的结合使用,实现获取更新的子组件的数据并发送给父组件
最终效果是每一次搜索框输入数据都会传递数据,类似百度搜索每次你输入都会更新推荐搜索的内容.
SearchComponent.vue
html
<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
html
<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
html
<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>
总结
大家喜欢的话,给个👍,点个关注!给大家分享更多计算机专业学生的求学之路!
版权声明:
发现你走远了@mzh原创作品,转载必须标注原文链接
Copyright 2024 mzh
Crated:2024-3-1