組件事件配合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簡化了表單元素與數據之間的雙向綁定。 - 模塊化開發：將功能拆分為多個組件，提高可維護性和復用性。
