组件事件配合v-model使用
如果是用户输入，我们希望在获取数据的同时发送数据配合v-model 来使用，帮助理解组件间的通信和数据绑定。
🧩 第一步：创建子组件（SearchComponent.vue）
这个组件用于处理用户的搜索输入，并将输入值传递给父组件。
✅ 功能说明：
- 数据属性
search：在 [data()]中定义了一个名为search的数据属性，作为输入框的双向绑定。 - 使用
v-model：模板中的<input type="text" v-model="search">实现了用户输入与search数据的同步。 - 监听器 [watch]：当
search发生变化时，通过$emit触发一个名为searchEvent的自定义事件，并传入新的值。 - 输出事件
searchEvent：该事件允许父组件订阅并接收子组件的数据更新。
📁 代码结构：
<script>
export default {data() {return {search: ''}},watch: {search(newVal) {this.$emit('searchEvent', newVal)}}
}
</script><template>搜索：<input type="text" v-model="search">
</template>
🌐 第二步：创建主组件（Main.vue）
这个组件负责显示来自子组件的数据，并展示到页面上。
✅ 功能说明：
- 引入子组件：使用
import SearchComponent from './SearchComponent.vue'引入子组件。 - 注册组件：在 [components]属性中注册
SearchComponent。 - 数据属性
search：用来保存从子组件接收到的搜索内容。 - 方法
getSearch(data)：响应子组件发出的searchEvent事件，将数据赋值给this.search。 - 模板渲染：使用插值表达式
{{ search }}显示当前搜索内容，并通过@searchEvent="getSearch"监听子组件的事件。
📁 代码结构：
<script>
import SearchComponent from './SearchComponent.vue'export default {components: {SearchComponent},data() {return {search: ''}},methods: {getSearch(data) {this.search = data}}
}
</script><template><h3>Main</h3><p>搜索内容 {{ search }}</p><SearchComponent @searchEvent="getSearch"/>
</template>
🔄 第三步：运行项目
确保你的项目结构如下：
src/
├── components/
│ ├── SearchComponent.vue
│ └── Main.vue
├── App.vue
└── main.js
🔧 修改 [App.vue]：
<template><Main />
</template><script>
import Main from './components/Main.vue'export default {components: {Main}
}
</script>
然后启动项目：
npm run dev
访问 http://localhost:端口，你应该能看到一个搜索框和下方显示的搜索内容。
🧠 总结
- 父子组件通信：通过
$emit在子组件中发送事件，在父组件中监听并处理。 - 数据绑定：
v-model简化了表单元素与数据之间的双向绑定。 - 模块化开发：将功能拆分为多个组件，提高可维护性和复用性。
