眾所周知，vue是單向資料流，子元件不能直接改變父元件中的變量，如下：
#parent.vue
<template>
<p>
<p>parent:{{ msg }}</p>
<children :msg="msg"></children>
</p>
</template>
<script>
import children from '@/components/children'
export default {
name: 'parent',
data() {
return {
msg: 'from parent'
}
},
components: {
children
}
}
</script>登入後複製
children.vue
<template>
<p>
<p>children:{{ msg }}</p>
<p>
<button @click='changeChild'>点击改变children的msg</button>
</p>
</p>
</template>
<script>
export default {
name: 'children',
data () {
return {
}
},
props: ['msg'],
methods: {
changeChild() {
this.msg = 'from children'
}
}
}
</script>登入後複製
頁面如下：
##點擊後：
上面是最基礎的父向子元件傳遞數據，子元件修改變數不影響父元件，那麼父子組件如果要同步呢？這時應該要使用
this.$emit()這個函數了。
第一種：v-model傳遞
#父元件修改：##<template>
<p>
<p>parent:{{ msg }}</p>
<children v-model="msg"></children>
</p>
</template>登入後複製
子元件修改：
<script>
export default {
name: 'children',
data () {
return {
}
},
model: {
prop: "msg"
},
props: ['msg'],
methods: {
changeChild() {
this.$emit('input', "child")
}
}
}
</script>登入後複製
頁如下：
點擊後：
#可見父子元件的值同步了
第二種：明確指定回應事件（@）
父元件修改：
<template>
<p>
<p>parent:{{ msg }}</p>
<children @upChange="changeMsg" :msg="msg"></children>
</p>
</template>
<script>
import children from '@/components/children'
export default {
name: 'parent',
data() {
return {
msg: 'from parent'
}
},
components: {
children
},
methods: {
changeMsg() {
this.msg = "收到子组件信号，嘤嘤嘤"
}
}
}
</script>登入後複製
<script>
export default {
name: 'children',
data () {
return {
}
},
model: {
prop: "msg"
},
props: ['msg'],
methods: {
changeChild() {
this.$emit('upChange', "给你一个value")
this.msg = 'from children'
}
}
}
</script>登入後複製
值得一提的是，this.$emit（）第二個參數可向父元件傳值，這裡用處很大，自行體會
頁如下：
點擊後：
兩種方法都基本上可以達到預期效果，具體自己分情況使用
說完父子通信後，理所當然到子子組件通信了，其實，機智的你應該也想到怎麼做了。沒錯，就是利用父組件當跳板，讓子子組件達到通訊的效果。
下面還是給個小範例：
#父元件：
##<template>
<p>
<children @upChange="changeMsg" :msg="msg"></children>
<children2 :msg2="msg2"></children2>
</p>
</template>
<script>
import children from '@/components/children'
import children2 from '@/components/children2'
export default {
name: 'parent',
data() {
return {
msg: 'from parent',
msg2: 'from parent'
}
},
components: {
children,
children2
},
methods: {
changeMsg(value) {
this.msg = value
this.changeChild2()
},
changeChild2() {
this.msg2 = "children2收到 children2收到 over over！"
}
}
}
</script>登入後複製
<template>
<p>
<p>children:{{ msg }}</p>
<p>
<button @click='changeChild'>点击呼叫children2</button>
</p>
</p>
</template>
<script>
export default {
name: 'children',
data () {
return {
}
},
model: {
prop: "msg"
},
props: ['msg'],
methods: {
changeChild() {
this.$emit('upChange', "children2，children2，收到请回答，收到请回答")
}
}
}
</script>登入後複製
子元件二：
<template>
<p>
<p>children2: {{ msg2 }}</p>
</p>
</template>
<script>
export default {
name: 'children2',
data () {
return {
}
},
props: ['msg2']
}
</script>登入後複製
頁如下： 點擊後：
本文介紹了vue資料綁定方式詳解，更多相關內容請關注php中文網。
相關推薦：
簡易PHP MySQL 分頁類別
#兩個不用遞歸的樹狀陣列建構子
HTML轉Excel，並實作列印，下載功能
#
以上是vue資料綁定方式詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
