vue组件之间的数据传递(通信)
2018-03-26 本文已影响338人
聪明的汤姆
vue.png
种类
- 父组件跟子组件通信
- 子组件跟父组件通信
- 兄弟组件之间的通信
父组件如何将数据传到子组件中
可以通过prop将数据传递给子组件
需要注意的是
- prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意间修改了父组件的状态，来避免应用的数据流变得难以理解。
- 每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。如果你这么做了，Vue 会在控制台给出警告。
代码
father.vue
<template>
// v-bind来绑定动态数据，静态数据可以不用v-bind指令(:是v-bind的简写)
<child-component :message='message'></child-component>
</template>
<script>
import child from 'child.vue';
export default {
name: "father",
data() {
return {
message: 'hello'
}
},
components: {
'child-component': child
}
}
</script>
child.vue
<template>
<div class='child'>{{ message }}</div>
</template>
<script>
export default {
name: "child",
props: ['message']
}
</script>
prop验证
<script>
export default {
name: "child",
props: {
// 基础类型检测 (`null` 指允许任何类型)
propA: Number,
// 可能是多种类型
propB: [String, Number],
// 必传且是字符串
propC: {
type: String,
required: true
},
// 数值且有默认值
propD: {
type: Number,
default: 100
},
// 数组/对象的默认值应当由一个工厂函数返回
propE: {
type: Object,
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
return value > 10
}
}
}
}
</script>
子组件如何将数据传到父组件中
可通过emit将数据传递给父组件，父组件监听事件的触发($on)，子组件手动触发事件($emit)。
代码
father.vue
<template>
// 父组件监听listenChild事件，执行getChildData方法，并且拿到传递过来的数据(@是v-on的简写)
<child-component @listenChild='getChildData'></child-component>
</template>
<script>
import child from 'child.vue';
export default {
name: "father",
methods: {
getChildData (val) {
console.log(`子组件传递过来的数据: ${val}`); // hello
}
},
components: {
'child-component': child
}
}
</script>
child.vue
<template>
<div class='child'></div>
</template>
<script>
export default {
name: "child",
created () {
// 在需要的传递数据的时候调用sendData方法，这里模拟调用
this.sendData();
},
methods: {
sendData () {
this.$emit('listenToChild', 'hello');
}
}
}
</script>
兄弟组件之间如何传递数据
可以用过一个vue实例Bus作为媒介，要相互通信的兄弟组件之中，都引入Bus，之后通过分别调用Bus事件触发$emit和监听$on来实现组件之间的通信和参数传递。类似与子传父，只不过是利用一个新的vue示例作为媒介，而不是当前vue示例(this)
代码
bus.js
import Vue from 'vue';
export default new Vue;
a.vue
<template>
<div class='a'></div>
</template>
<script>
import Bus from 'bus.js' ;
export default {
name: "a",
created() {
// 在需要的传递数据的时候调用sendData方法，这里模拟调用
this.sendData();
},
methods: {
sendData () {
Bus.$emit('listenToA', 'hello');
}
}
}
</script>
b.vue
<template>
<div class='b'></div>
</template>
<script>
import Bus from 'bus.js';
export default {
name: "b",
monted() {
Bus.$on('listenToA', this.getAData);
},
methods: {
getAData (val) {
console.log(`a组件传递过来的数据: ${val}`); // hello
}
}
}
</script>
