首页 > 代码库 > Vue2.0 实战项目(五) 组件间通信的方法
Vue2.0 实战项目(五) 组件间通信的方法
Vue组件之间通信分为三种情况：父组件向子组件通信、子组件向父组件通信、兄弟组件间通信。
一.父组件向子组件通信
通过props可以将值传递给子组件
<!-- 父组件 -->
<template> <div id="app"> <!-- 父子组件间通信 --> <child :message="toChildMsg"></child> </div> </template> <script type="text/ecmascript-6"> import childfrom ‘./components/child/child.vue‘; export default { data() { return { toChildMsg: ‘将我传给子组件‘, }; }, components: { child } }; </script>
<!-- 子组件 -->
<template>
<div id="child">
<h1>子组件</h1>
<p>{{message}}</p>
</div>
</template>
<script type="text/ecmascript-6">
export default {
props: [‘message‘]
};
</script>
二.子组件向父组件通信
通过某种事件，自定义$emit通信给父组件
1 <!-- 父组件 --> 2 <template> 3 <div id="app"> 4 <!-- 父子组件间通信 --> 5 <child @listenToChildMsg="takeMsg"></child> 6 </div> 7 </template> 8 9 <script type="text/ecmascript-6"> 10 import child from ‘./components/child/child.vue‘; 11 12 export default { 13 components: { 14 child 15 }, 16 methods: { 17 takeMsg: function (data) { 18 this.msgData =http://www.mamicode.com/ data; 19 } 20 } 21 }; 22 </script>
<!-- 子组件 -->
<template>
<div id="child">
<h1>子组件</h1>
<div @click="sendMsgToParent">点击传值给父组件</div>
</div>
</template>
<script type="text/ecmascript-6">
export default {
methods: {
sendMsgToParent: function () {
this.$emit(‘listenToChildMsg‘, ‘将我传给父组件‘);
}
}
};
</script>
三.兄弟组件间通信
兄弟组件间通信有两种方式。如果通信不复杂的话可以使用event-bus方法，如果比较复杂可以使用vuex。
event-bus方法是新建一个空白组件，通过此组件达到通信的目的。
<!-- bus组件 --> <template> </template> <script type="text/ecmascript-6"> import Vue from ‘vue‘; export default new Vue(); </script> <style lang="stylus" rel="stylesheet/stylus"> </style>
<!-- foo组件 -->
<template>
<div>
<h1>the count of foo is {{fooCount}}</h1>
<button @click="addBar()">点击</button>
</div>
</template>
<script type="text/ecmascript-6">
import eventBus from ‘../bus/bus.vue‘;
export default{
methods: {
addBar: function () {
eventBus.$emit(‘addBar‘);
}
},
data() {
return {
fooCount: 0
};
},
mounted: function () {
eventBus.$on(‘addFoo‘, function (num) {
this.fooCount += num;
}.bind(this));
}
};
</script>
<style lang="stylus" rel="stylesheet/stylus">
</style>
<!-- bar组件 -->
<template>
<div>
<h1>the count of bar is {{barCount}}</h1>
<button @click="addFoo()">点击</button>
</div>
</template>
<script type="text/ecmascript-6">
import eventBus from ‘../bus/bus.vue‘;
export default{
methods: {
addFoo: function () {
eventBus.$emit(‘addFoo‘, 2);
}
},
data() {
return {
barCount: 0
};
},
mounted: function () {
eventBus.$on(‘addBar‘, function () {
this.barCount++;
}.bind(this));
}
};
</script>
<style lang="stylus" rel="stylesheet/stylus">
</style>
<!-- App.vue -->
<template>
<div id="app">
<!-- 非父子组件间传值 -->
<bar></bar>
<br />
<foo></foo>
</div>
</template>
<script type="text/ecmascript-6">
import foo from ‘./components/foo/foo.vue‘;
import bar from ‘./components/bar/bar.vue‘;
export default {
components: {
foo,
bar
}
};
</script>
<style lang="stylus" rel="stylesheet/stylus">
</style>
通过vuex管理各组件间通信
<template>
<div id="app">
<p>{{count}}
<button @click="inc">+</button>
<button @click="dec">-</button>
</p>
</div>
</template>
<script type="text/ecmascript-6">
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
inc: state => state.count++,
dec: state => state.count--
}
});
export default {
el: ‘#app‘,
computed: {
count() {
return store.state.count;
}
},
methods: {
inc() {
store.commit(‘inc‘);
},
dec() {
store.commit(‘dec‘);
}
}
}
</script>
Vue2.0 实战项目(五) 组件间通信的方法
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。