1.父组件传递数据给子组件
通过props传递数据
<template>
<div>
<h2>父组件</h2>
{{ parentMsg }}
<child-one :child-msg="parentMsg"></child-one> //这里必须要用 - 代替驼峰
</div>
</template>
<script>
import ChildOne from '@/components/ChildOne.vue'; // @代表 src
export default {
name: 'App',
components: {
ChildOne
},
data () {
return {
parentMsg: '我是来自父组件的消息'
};
}
};
</script>
<style>
</style>
<!-- 子组件 -->
<template>
<div>
<h2>子组件</h2>
{{ childMsg }}
</div>
</template>
<script>
export default {
props: ['childMsg']
};
</script>
<style>
</style>
2.子组件传递数据给父组件
通过$emit传递父组件数据
<template>
<div>
<h2>父组件</h2>
{{ parentMsg }}
<child @childEvent="change"></child>
</div>
</template>
<script>
import Child from '@/components/Child.vue';
export default {
name: 'App',
components: {
Child
},
data () {
return {
parentMsg: ''
};
},
methods: {
change(msg) {
this.parentMsg = msg;
}
}
};
</script>
<style>
</style>
<template>
<div>
<h2>子组件</h2>
</div>
</template>
<script>
export default {
mounted () {
this.$emit('childEvent','我是来自子组件的消息');
}
};
</script>
<style>
</style>
子组件到父组件的通讯主要为父组件如何接受子组件之中的数据。这里的数据包括属性和方法（String,Number,Boolean,Object, Array ,Function）。
3.不同组件（非父子组件）之间的数据传递
如果2个组件不是父子组件那么如何通信呢？这时可以通过eventbus来实现通信.
所谓eventbus就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件.
<!-- App.vue-->
<template>
<div id="app">
<com-a></com-a>
<com-b></com-b>
</div>
</template>
<script>
import ComA from '@/components/coma';
import ComB from '@/components/comb';
export default {
name: 'App',
components: {
ComA,
ComB
}
};
</script>
<style>
</style>
<!-- coma.vue-->
<template>
<div>
<h2>组件A</h2>
<input @keyup="handleKeyup" v-model="num" type="text">
{{ num }}
</div>
</template>
<script>
import vueObj from '@/utils/communication';
export default {
data() {
return {
num: 0
};
},
methods: {
handleKeyup() {
// console.log(this.num);
// 当num的值放生变化之后，通知comb组件
vueObj.$emit('change', this.num); // 触发事件
}
}
};
</script>
<style>
</style>
<!-- comb.vue-->
<template>
<div>
<h2>组件B</h2>
{{ n }}
</div>
</template>
<script>
import vueObj from '@/utils/communication';
export default {
data() {
return {
n: 0
};
},
created() {
vueObj.$on('change', (num) => { // 监听事件
this.n = num;
});
}
};
</script>
<style>
</style>
// 为了多个组件之间通信使用
import Vue from 'vue';
// eventbus
const vueObj = new Vue();
export default vueObj;
