Vue 组件间通信
2018-12-22 本文已影响0人
最尾一名
背景
在使用 Vue 时，经常会有父子组件之间的通信需求，有很多种方法可以实现。
实现
父组件向子组件通信
方法一： 使用 $children
方法二：使用 props
通过 props 选项 ，父组件可以将数据传递给子组件。
// father.vue
<template>
<child :msg="message"></child>
</template>
<script>
import child from './child.vue';
export default {
components: {
child
},
data () {
return {
message: 'father message';
}
}
}
</script>
// child.vue
<template>
<div>{{msg}}</div>
</template>
<script>
export default {
props: {
msg: {
type: String,
required: true
}
}
}
</script>
子组件向父组件通信
方法一：使用 $parent
$parent
方法二：通过修改父组件传递的 props 来修改父组件数据（不推荐）
方法三：通过 Vue 事件传递数据
父组件向子组件传递事件方法，子组件通过 $emit 触发事件，回调给父组件。
// father.vue
<template>
<child @msgFunc="func"></child>
</template>
<script>
import child from './child.vue';
export default {
components: {
child
},
methods: {
func (msg) {
console.log(msg);
}
}
}
</script>
// child.vue
<template>
<button @click="handleClick">点我</button>
</template>
<script>
export default {
props: {
msg: {
type: String,
required: true
}
},
methods () {
handleClick () {
//........
this.$emit('msgFunc');
}
}
}
</script>
非父子组件、兄弟组件之间的数据传递
非父子组件通信，Vue 官方推荐使用一个 Vue 实例作为中央事件总线。
Vue 内部有一个事件机制，可以参考源码。
$on 方法用来监听一个事件。
$emit 用来触发一个事件。
复杂的单页应用数据管理
使用 vuex 来进行数据的管理。
