組件通信各種情況總結(jié)
VUE是以數(shù)據(jù)驅(qū)動(dòng)的MVVM框架，又是模塊化開發(fā)力喷，所以各個(gè)組件間的通信傳遞數(shù)據(jù)非常重要鸦致，在項(xiàng)目用到幾種通信方式總結(jié)一下
props通信組件與根節(jié)點(diǎn)（父子之間）子組件接受父組件的數(shù)據(jù)
父組件：
<template>
<div>
<children :message="msg"></children>
</div>
</template>
<script>
import Children from './children';
export default{
components:{
Children
},
data(){
return {
msg:123
}
}
}
</script>
<style scoped>
</style>
子組件：
<template>
<div>
{{message}}
</div>
</template>
<script>
export default{
porps:['message']
}
</script>
<style>
</style>
子組件通過components在父組件注冊(cè)杉畜，通過屬性綁定message 綁定父組件msg的數(shù)據(jù)子組件在porps中注冊(cè)message接受數(shù)據(jù)，porps可以是一個(gè)對(duì)象也可以是一個(gè)數(shù)組為了保證組件在各種狀態(tài)下可用建議porps是一個(gè)對(duì)象的形式瓤漏，給message設(shè)置默認(rèn)值
將子組件改成
<template>
<div>
{{message}}
</div>
</template>
<script>
export default{
porps:{
message:{
type:String,
default:'abc'
}
}
}
</script>
<style scoped>
</style>
在style標(biāo)簽中添加scoped屬性可以讓css修飾只對(duì)本組件產(chǎn)生效果不會(huì)對(duì)其他組件產(chǎn)生干擾
數(shù)據(jù)反傳子組件向父組件通信數(shù)據(jù)
監(jiān)聽：$on(eventName)
觸發(fā)：$emit(eventName)
在父組件中通過監(jiān)聽子組件觸發(fā)的事件通過$event接收數(shù)據(jù)
<template>
<div>
<children :message="msg" @childrenEvent="change($event)"></children>
</div>
</template>
<script>
import Children from './children';
export default{
components:{
Children
},
data(){
return {
msg:123,
receive:''
}
},
methods:{
change(event){
this.receive=event;
}
}
}
</script>
<style scoped>
</style>
在組件中通過$emit注冊(cè)一個(gè)childrenEvent事件
<template>
<div>
{{message}}
<button @click="onChange"></button>
</div>
</template>
<script>
export default{
porps:{
message:{
type:String,
default:'abc'
}
},
data(){
return {
emitMsg:'cba'
}
},
methods:{
onChange(){
this.$emit('childrenEvent',this.emitMsg);
}
}
}
</script>
<style scoped>
</style>
將子組件中的emitMsg數(shù)據(jù)傳遞給父組件
父組件調(diào)用子組件的方法可以使用ref屬性
在子組件上注冊(cè)引用信息，引用信息注冊(cè)在父組件的$refs對(duì)象上
父組件：
<template>
<div @click="change">
<children ref="child"></children>
</div>
</template>
<script>
import Children from './plug2';
export default{
components:{
Children
},
data(){
return{
}
},
methods:{
change(){
this.this.$refs.child.childrenMethod();
}
}
}
</script>
<style scoped>
</style>
子組件：
<template>
<div>
</div>
</template>
<script>
export default{
data(){
return{
}
},
methods:{
childrenMethod(){
console.log(1);
}
}
}
</script>
<style scoped>
</style>
這樣在父組件中觸發(fā)事件就可以直接調(diào)用子組件的childrenMethod方法了
VUEX不同頁面兄弟組件之間通信
默認(rèn)安裝了node.js
npm install vuex --save
在src文件夾中創(chuàng)建一個(gè)store.js的文件
在main.js引入
import store from './store.js';
new Vue({
el: '#app',
store,
template: '<Layout/>',
components: { Layout }
})
Store.js文件
const state = { //state存儲(chǔ)共用狀態(tài)的地方
};
const mutations={ //mutations更改state里狀態(tài)的方法在這里設(shè)置函數(shù)更改state里的狀態(tài)
};
export default new Vuex.Store({
state,
mutations
})
在一些場(chǎng)景中颊埃，列如A組件觸發(fā)事件執(zhí)行B組件的方法時(shí)蔬充，可以使用vue-bus插件
npm install vue-bus --save
在main.js引入
import VueBus from 'vue-bus';
Vue.use(VueBus);
在A組件中發(fā)出事件
this.$bus.emit(‘eventName’,可以傳遞參數(shù)出去)；
在b組件的created事件鉤子中監(jiān)聽這個(gè)事件
this.$bus.on(‘eventName’(接收傳遞過來的參數(shù))=>{})班利；
計(jì)算屬性
對(duì)數(shù)據(jù)進(jìn)行過濾計(jì)算饥漫，在數(shù)據(jù)發(fā)生變化時(shí)，計(jì)算屬性也會(huì)一起改變
computed:{
pri:{
set(newValue){
this.cent=newValue*100 //newValue是get計(jì)算后的數(shù)據(jù)
},
get(){
return this.cent/100
}
}
},
通過 get方法計(jì)算this.cent的數(shù)據(jù)在前端展示 set計(jì)算后的this.cent屬性可以向后臺(tái)傳遞罗标，不需要進(jìn)行其他方式的再計(jì)算
