vue中sync，v-model----雙向數據綁定

需求：父子組件同步數據

實現方式：sync或者v-model

1、sync

官網： https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6

原理：

一般咱們要父子組件中的數據時刻保持同步，能夠這樣：

父組件中的template：

<sycn-son :foo="fatherFoo"></sycn-son>

 

 

子組件註冊foo數據：

props:{
foo: String
},

 

 

子組件改變：經過點擊按鈕，觸發update事件，將值傳入

<button @click="updateFoo">點擊改變</button>

 

 

methods:{
    updateFoo(){
    this.$emit('update','foo被子組件改變啦')
    }
}

 

 

父組件接收：

<sycn-son :foo="fatherFoo" v-on:update="sonFoo => fatherFoo = sonFoo"></sycn-son>

 

 

效果：

未點擊：

 

點擊改變：

父組件來點擊改變：

 

這樣就實現了父子組件同步數據，sync就是這樣的原理，vue提供了sync修飾符簡化了上面的代碼

所以就能夠這樣寫：

父組件：

<sycn-son :foo.sync="fatherFoo"></sycn-son>

 

 

子組件：

updateFoo(){
    this.$emit('update:foo','foo被子組件改變啦')
}

 

 

效果：依舊如上圖

代碼：

父組件：

<template>
<div>
<sycn-son :foo.sync="fatherFoo"></sycn-son>
<br>
父組件的foo：{{fatherFoo}}
<button @click="syncFatherUpdate">父組件來點擊改變</button>
</div>
 
</template>
 
<script>
import sycnSon from './sycnSon'
export default {
name: 'sycnFather',
components:{
　　sycnSon
},
data () {
　　return {
　　　　fatherFoo:'我是一開始的foo'
　　}
},
methods:{
　　syncFatherUpdate (){
　　　　this.fatherFoo = '被父組件改變'
　　}
 
　}
}
</script>

 

 

子組件：

<template>
<div>
子組件的foo：{{foo}}
<button @click="updateFoo">點擊改變</button>
</div>
</template>
 
<script>
export default {
name: 'sycnSon',
props:{
    foo: String
},

methods:{
    updateFoo(){
        this.$emit('update:foo','foo被子組件改變啦')
}
}
}
</script>    

 

 

注意：

當sync修飾的prop是個對象或者數組，雖然對象/數組是引用類型的，你直接修改子組件，會同時修改父組件的數據，可是會讓數據流變得更加難以分析！因此要深度複製對象給一個新值，再改變新值傳給父組件。

JSON.parse(JSON.stringify(this.analysisData))

 

 

 

2、v-model---只介紹父子組件雙向綁定

v-model一般用於表單元素的雙向綁定，v-model 是 .sync的一種體現。約定俗成是用於表單類型的雙向綁定。可不能夠用於其餘的組件呢，固然能夠，只是沒有sync這麼直觀

1. 表單類型的雙向綁定：

官網： https://cn.vuejs.org/v2/guide/components.html#%E5%9C%A8%E7%BB%84%E4%BB%B6%E4%B8%8A%E4%BD%BF%E7%94%A8-v-model

子組件：

<input :value="value" @input="$emit('input', $event.target.value)">

@input是自帶的oninput事件，當輸入框改變時，調用裏面的事件。

 

父組件：

<model-son v-model="fatherMsg"></model-son>

至關於：

 

效果：

未改變輸入框：

改變輸入框：

點擊父組件來點擊改變：

 完整代碼：

父組件：

<template>
<div>
    <model-son v-model="fatherMsg"></model-son>
    <br>
    父組件：{{fatherMsg}}
    <button @click="modelFatherUpdate">父組件來點擊改變</button>
    
</div>

</template>

<script>
import modelSon from './modelSon'
export default {
  name: 'modelFather',
  components:{
      modelSon
  },
  data () {
    return {
        fatherMsg:'父組件一開始定義的fatherMsg'
    }
  },
  methods:{
    modelFatherUpdate (){
        this.fatherMsg = 'fatherMsg被父組件改變'
    }

  }
}
</script>

 

子組件：

<template>
<div>
  子組件的msg：
  <input :value="value" @input="$emit('input', $event.target.value)">
</div>

</template>

<script>
export default {
  name: 'modelSon',
  // 必須是value
  props:{
      value:String
  },
}
</script>

注意：註冊必須是value

 

2.自定義組件v-model雙向綁定

官網：

子組件：首先要註冊，和說明model

model: {
    prop: 'msg',
    event: 'change'
},
props:{
    msg:String
},

 

使用model解釋：prop屬性說，我要將msg做爲該組件被使用時v-model能取到的值，也就是一開始的值

event說，我emit ‘change’ 的時候，傳入的參數值就是父組件v-model要收到的值。

 

父組件：使用v-model綁定本身的數據

<model-son v-model="fatherMsg"></model-son>

 

效果：

未點擊時：

 

點擊改變：

 

父組件來點擊改變：

完整代碼：

父組件：

<template>
<div>
<model-son v-model="fatherMsg"></model-son>
<br>
父組件：{{fatherMsg}}
<button @click="modelFatherUpdate">父組件來點擊改變</button>
 
</div>
 
</template>
 
<script>
import modelSon from './modelSon'
export default {
    name: 'modelFather',
components:{
    modelSon
},
data () {
    return {
        fatherMsg:'父組件一開始定義的fatherMsg'
    }
},
methods:{
    modelFatherUpdate (){
        this.fatherMsg = 'fatherMsg被父組件改變'
        }
 
    }
}
</script>
         

 

子組件：

<template>
<div>
子組件的msg：{{msg}}
<button @click="modelUpdate">點擊改變</button>
</div>
 
</template>
 
<script>
export default {
    name: 'modelSon',
    model: {
        prop: 'msg',
        event: 'change'
    },
    props:{
        msg:String
    },
methods:{
    modelUpdate (){
        this.$emit('change','msg被子組件改變了！')
}
 
}
}
</script>        

 

 

待補充。。。