前端流行框架Vue3教程：16. 组件事件配合`v-model`使用

组件事件配合v-model使用

如果是用户输入，我们希望在获取数据的同时发送数据配合v-model 来使用，帮助理解组件间的通信和数据绑定。

🧩 第一步：创建子组件（SearchComponent.vue）

这个组件用于处理用户的搜索输入，并将输入值传递给父组件。

✅ 功能说明：

1. 数据属性 search：在 [data()]中定义了一个名为 search 的数据属性，作为输入框的双向绑定。
2. 使用 v-model：模板中的 <input type="text" v-model="search"> 实现了用户输入与 search 数据的同步。
3. 监听器 [watch]：当 search 发生变化时，通过 $emit 触发一个名为 searchEvent 的自定义事件，并传入新的值。
4. 输出事件 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）

这个组件负责显示来自子组件的数据，并展示到页面上。

✅ 功能说明：

1. 引入子组件：使用 import SearchComponent from './SearchComponent.vue' 引入子组件。
2. 注册组件：在 [components]属性中注册 SearchComponent。
3. 数据属性 search：用来保存从子组件接收到的搜索内容。
4. 方法 getSearch(data)：响应子组件发出的 searchEvent 事件，将数据赋值给 this.search。
5. 模板渲染：使用插值表达式 {{ 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 简化了表单元素与数据之间的双向绑定。
• 模块化开发：将功能拆分为多个组件，提高可维护性和复用性。