vue返回父级页面_vue子父级页面/两个及以上组件函数交互调用方法

以公共vue组件间交互为例

1.以下为Header.vue文件内容

菜单1

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;

}

}

}