以公共vue组件间交互为例
1.以下为Header.vue文件内容
import Weather from '@/components/Weather'
export default {
data(){
return {
}
},
components: {
Weather,
},
methods: {
changed: function(res){
this.$emit('on-changed',res);
return res;
}
}
}
请注意,此处我用到的
Menu标签上用到的@on-select是iView框架中对Menu写的methods,此处也相当于多组件间的交互。
在methods中,写入了changed(res)函数,代码中的this.$emit('on-changed',res)是为Header组件注册on-changed事件,当其他组件使用Header组件时,可以对此事件绑定执行函数,值会通过执行函数参数传递过去,也就达到了组件间交互的目的。
到此处还不够明白的可以看下面调用Header组件的页面代码理解,下面特意用不同的函数名称进行调用
2.Index.vue代码如下
import Header from '@/components/Header'
export default {
data(){
return {
menuName: '0',
}
},
components:{
Header,
},
methods:{
menuChanged: function(res){
this.$Message.success('选中了 '+res)
this.menuName = res;
}
}
}