大概步驟：

目標效果

二、輸入框的資料觸發事件

• 要點：
  • 使用雙向資料繫結 v-model
  • 監聽輸入框輸入的資料，並傳遞給父元件去操作
  • 新增取消按鈕，清空輸入框和顯示隱藏取消按鈕

• （一、雙向資料繫結）

<!--雙向資料繫結在query變數上-->
<input v-model="query" />
<!--展示按鈕在query有值的時候，點選事件清空query值-->
<i v-show="query" @click="_clearQuery">&#xe674;</i>

data(){
	return {
		query:
 
''	//雙向資料繫結定義，判斷是否展示取消按鈕
	}
}
methods:{
	//清空輸入框的值
    _clearQuery(){
      this.query=''
    },
}

• （二、監聽輸入框值改變派發事件）

/******監聽輸入框資料***************/
created(){
    this.$watch('query',(newQuery)=>{
      this.$emit('query',newQuery)
    }
  },
/******等同於使用監聽器****************/
watch:{
	query(newQuery){
 

		this.$emit('query',newQuery)
	}
}

• 監聽資料，改變後傳遞給父元件，用於獲取資料和做判斷

專案來源：慕課網 如有建議和疑問可聯絡 QQ：1017386624 郵箱：[email protected]