父子組件之間的雙向綁定非常簡單，但是很多人因為是從Vue 2+開始使用的，可能不知道如何雙向綁定，當然最簡單的雙向綁定（單文件中）就是表單元素的 v-model 了，例如 <input type="text" /> 它會響應表單元素的 value 屬性，當輸入框文本改變時，會將 value 值傳給 v-model 所綁定的變量，如果同時設置 v-model 和 value ， value 屬性無效。

創新互聯2013年至今，是專業互聯網技術服務公司，擁有項目網站制作、成都做網站網站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元東昌府做網站,已為上家服務,為東昌府各地企業和個人服務,聯系電話:18980820575

父子組件的自定義雙向 v-model

當若干dom封裝成組件時，在父組件中使用子組件時，卻無法在子組件標簽上使用 v-model ，因為子組件標簽不是表單元素,這個時候，我們需要自定義我們想要的 v-model 規則。

<!-- children.vue -->
<template>
 <h2>{{ msg }}</h2>
</template>
<script>

export default{
 model:{
  prop:'msg',//這個字段，是指父組件設置 v-model 時，將變量值傳給子組件的 msg
  event:'parent-event'//這個字段，是指父組件監聽 parent-event 事件
 },
 props:{
  msg:String //此處必須定義和model的prop相同的props，因為v-model會傳值給子組件
 },
 mounted(){
 //這里模擬異步將msg傳到父組件v-model，實現雙向控制
  setTimeout(_=>{
   let some = '3秒后出現的某個值';//子組件自己的某個值
   this.$emit('praent-event',some);
   //將這個值通過 emit 觸發parent-event，將some傳遞給父組件的v-model綁定的變量
  },3000);
 }
}
</script>

<!-- parent.vue -->
<template>
 <children v-model="parentMsg"></children>
</template>
<script>
import children from 'path/to/children.vue';
export default{
 components:{
  children
 },
 data(){
  return{
   parentMsg:'test'
  }
 },
 watch:{
  parentMsg(newV,oldV){
   console.log(newV,oldV);
   //三秒后控制臺會輸出
   //'3秒后出現的某個值','test'
  }
 }
}
</script>

網站欄目：Vue父子組件雙向綁定傳值的實現方法-創新互聯
轉載來于：http://m.newbst.com/article38/hsipp.html

成都網站建設公司_創新互聯，為您提供網站設計公司、App設計、自適應網站、商城網站、全網營銷推廣、服務器托管

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯