组件通信各种情况总结
VUE是以数据驱动的MVVM框架，又是模块化开发，所以各个组件间的通信传递数据非常重要，在项目用到几种通信方式总结一下
props通信组件与根节点（父子之间）子组件接受父组件的数据
父组件：
<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在父组件注册，通过属性绑定message 绑定父组件msg的数据子组件在porps中注册message接受数据，porps可以是一个对象也可以是一个数组为了保证组件在各种状态下可用建议porps是一个对象的形式，给message设置默认值
将子组件改成
<template>
<div>
{{message}}
</div>
</template>
<script>
export default{
porps:{
message:{
type:String,
default:'abc'
}
}
}
</script>
<style scoped>
</style>
在style标签中添加scoped属性可以让css修饰只对本组件产生效果不会对其他组件产生干扰
数据反传子组件向父组件通信数据
监听：$on(eventName)
触发：$emit(eventName)
在父组件中通过监听子组件触发的事件通过$event接收数据
<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注册一个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数据传递给父组件
父组件调用子组件的方法可以使用ref属性
在子组件上注册引用信息，引用信息注册在父组件的$refs对象上
父组件：
<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>
这样在父组件中触发事件就可以直接调用子组件的childrenMethod方法了
VUEX不同页面兄弟组件之间通信
默认安装了node.js
npm install vuex --save
在src文件夹中创建一个store.js的文件
在main.js引入
import store from './store.js';
new Vue({
el: '#app',
store,
template: '<Layout/>',
components: { Layout }
})
Store.js文件
const state = { //state存储共用状态的地方
};
const mutations={ //mutations更改state里状态的方法在这里设置函数更改state里的状态
};
export default new Vuex.Store({
state,
mutations
})
在一些场景中，列如A组件触发事件执行B组件的方法时，可以使用vue-bus插件
npm install vue-bus --save
在main.js引入
import VueBus from 'vue-bus';
Vue.use(VueBus);
在A组件中发出事件
this.$bus.emit(‘eventName’,可以传递参数出去)；
在b组件的created事件钩子中监听这个事件
this.$bus.on(‘eventName’(接收传递过来的参数)=>{})；
计算属性
对数据进行过滤计算，在数据发生变化时，计算属性也会一起改变
computed:{
pri:{
set(newValue){
this.cent=newValue*100 //newValue是get计算后的数据
},
get(){
return this.cent/100
}
}
},
通过 get方法计算this.cent的数据在前端展示 set计算后的this.cent属性可以向后台传递，不需要进行其他方式的再计算
