众所周知，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>注意：model部分不能省略，this.$emit（）触发的事件为input（当父组件上没有明确绑定返回事件时，input为默认），传递的值为child
页面如下：
点击后：
可见父子组件的值同步了
第二种：明确指定响应事件（@）
父组件修改：
立即学习“前端免费学习笔记（深入）”；
<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>这里我故意在emit之后修改了msg的值，事实证明，这是不行的，所以我猜测emit是一个异步函数，会在队列的最后执行，也就是说这里赋值‘from children’最后被覆盖了。
值得一提的是，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中文网。
相关推荐：
