目錄

• 一、父子元件單向傳值
• 1、父向子傳值
  
• 2、子向父傳值
• 二、父子元件資料雙向繫結

實現思路：

父 向 子 元件傳值：使用 props 屬性。( props 是property[屬性] 的複數簡寫 )
子 向 父 元件傳值：使用自定義事件。

一、父子元件單向傳值

1、父向子傳值

父向子元件傳值，子元件接收到資料之後，儲存到自己的變數中。

//父元件寫法 
<cld :numP="num" ></cld> 
 
//子元件定義以及資料 
components:{ 
 cld:{ 
  template:'#child',props:{ 
   numP:Number 
  },} 
} 
 
//子元件內容 
<template id="child"> 
 <div> 
  {{ numP }} 
 </div> 
</template> 

props 用於接收父元件傳過來的值，props 的寫法有很多種，具體如：

//方式1 ：  直接接收資料 
props: [ 'numP' ] 
 
//方式2： 加型別限制 
props: [ 
 numP: Number 
 ]  
 
//方式3：新增預設值 
props: [ 
 numP: { 
  type:Number,default:0 
  } 
]  
 
//方式4：是否必須值限制 
props: [ 
 numP: { 
  type:Number,default:0,require:true //新增必須值，不傳此值會報錯 
 } 
]  
 
//方式5：採用對象形式 
props: { 
 numP: { 
  type:Number,} 
} 

2、子向父傳值

子向父元件傳值，主要通過自定義事件進行傳值，具體例項如下：

// 父元件內容 
<div> 
 子元件獲取到的資料{{getNum}} 
 <cld :numb="num" @accept="getNumC"></cld> 
</div> 
 
//父元件方法 
methods:{ 
 getNumC(data){ 
  this.getNum = data //接收子元件傳的資料 
 } 
},//子元件定義 
components:{ 
 cld:{ 
  template:'#child',data(){ 
   return{ 
    numC:1314 //子元件資料定義 
   } 
  },mounted(){ 
    this.$emit( 'accept',this.numC ) // 觸發自定義事件 
   } 
  } 
},

二、父子元件資料雙向繫結

的資料都是單向流動的，而且 vue 中從來就沒有任何的雙向繫結，v-model 實現的雙向繫結只是語法糖而已。

方式1：利用 watch 實現父子元件的資料雙向繫結，具體例項如下：

<div id="app"> 
 資料<br>{{num}} 
 <input type="text" v-model="num"><br> 
 <cld :numb="num" @accept="getNumC"></cld> 
</div> 
//子元件內容 
<template idhttp://www.cppcns.com="child"> 
 <div> 
  資料<br>{{childNum}} 
  <input type="text" v-model="childNum" /> 
 </div> 
</template> 
 
  <!-- 父子元件通訊 --> 
const app = new Vue({ 
 el:'#app',data:{ 
   num:'520',},methods:{ 
   getNumC(data){ 
    this.num = data 
   } 
  },components:{ 
   cld:{ 
    template:'#child',props:{ 
     numb:String 
    },data(){ 
    return{ 
     childNum:0,} 
   },watch:{ 
   numb:function(){ 
    this.childNum = this.numb 
   },childNum:function(){ 
    this.$emit('accept',this.childNum) 
    } 
   },mounted(){ 
   this.childNum = this.numb 
   } 
  } 
 }  
}) 

方式2：.sync 修飾符實現雙向繫結

在vue 1.x 中的 .sync 修飾符所提供的功能。當一個子元件改變了一個帶 .sync 的 prop 的值時，這個變化也會同步到父元件中所繫結的值。這很方便，但也會導致問題，因為它破壞了單向資料流。(資料自上而下流，事件自下而上走)

<cld :numb.sync="num" ></cld> 
//會擴充套件為： 
<cld  :numb="bar"  @update:numb=”val => bar = val”/> 

當元件需要更新 numb 的值時，需要觸發更新事件：

this.$emit("update:numb",newValue ); 

使用具體例項如下：

// 父元件 
<Father :foo.sync="foo"></Father> 
 
//子元件 
props: ['foo'],data() { 
  return { 
   newFoo: this.foo; 
   } 
},methods:{ 
 add:function(){ 
  this.newMsg=10; 
  this.$emit('update:foo',this.newFoo); 
 } 
} 

到此這篇關於前端框架Vue 父子元件資料雙向繫結的文章就介紹到這了,更多相關Vue 父子元件資料雙向繫結內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！