vue调用函数怎么传参_Vue(非)父子组件的传值以及方法调用

1.vue父组件给子组件传值的方法

子组件中通过props接收传值

props:{

username:{

type:String,

default:""

}

}

2.vue父组件调用子组件的方法

this.$refs.header.子组件的方法

3.子组件传值给父组件

一般通过点击事件

this.$emit("getName",this.msg)

在这里注册一个事件，把值通过事件带过去。

然后在父组件中通过

在methods中可以通过

getNamefromchild(data){

data就是传过来的值

}

4.子组件调用父组件的方法

在子组件中

diaoyongparent(){

this.$emit("diaoyongParentfunc")

这里可以带参数

}

然后在父组件中

diaoyongbychild(){

alert("调用父组件的方法了，如果有参数也可以哦")

}

5.对于非父子组件的传值

首先在main.js里面定义Vue对象的时候在data属性里面创建一个变量，并赋值为一个vue对象，这个变量在整个应用中都可以直接访问，他可以充当EventHub事件中心

new Vue({

el:"#app",

router,

store,

components:{App},

data:{

Hub:new Vue()

}

})

然后在第一个组件里面

gotoside(){

this.$root.Hub.$emit("oneEvent",this.msg)

}

然后在第二个组件里面

created(){

this.$root.Hub.$on("oneEvent",function(msg){

alert(msg)

})

}