vue组件穿方法_vue组件传参的几种方式

组件传参的方式：

观察者模式(子传父)

通过给子组件中设置方法，并在子组件实例中写下ref=名字，

子组件中的事件里写下$emit(‘方法名’,’参数’)

此时父组件可以在mounted生命周期中通过this.$refs[‘名字’].$on(‘方法名’，回调)

父亲的msg: {{ msg }}

template: `

点击儿子的按钮，发送给父亲

`,

methods: {

}

})newVue({

el:'#app',

data: {

msg:'我是父亲的msg'},

mounted(){this.$refs['son'].$on('func', (msg)=>{

console.log(msg)this.msg =msg

})

}

})

发布订阅模式：发布订阅模式：父传子，子传父或者兄弟之间传参

需要引入

发布消息时：PubSub.publish(‘方法名’，‘传递的信息’)

订阅时：PubSub.subscribe(‘方法名’，(e,msg)=>{})

发布消息后，订阅者接受消息时的方法名必须与发布时的订阅名保持一致即可收到传过来的数据

我是父亲的msg: {{msg}}父亲里面的按钮

template: `

点击coma

`,

methods: {

sendMsg(){//发布

PubSub.publish('send', '我是coma传过来的消息')

}

}

})

Vue.component('comb', {

template: `

comb：{{ msg }}

comb: {{ title }}

`,

data() {return{

msg:'我是comb里面的msg',

title:'我是comb里面的title'}

},

mounted(){//订阅

PubSub.subscribe('send', (e, msg)=>{//console.log(msg)

this.msg =msg

})

PubSub.subscribe('parendsend', (e,msg)=>{this.title =msg

})

}

})newVue({

el:'#app',

data: {

msg:'我是父亲的msg'},

methods:{

parentsendmsg(){

PubSub.publishSync('parendsend', '我是父亲传过来的消息')

}

},

mounted(){

PubSub.subscribe('send' ,(e, msg)=>{

console.log(msg)this.msg =msg

})

}

})

事件总线传参：在vue原型上面写一个事件总线属性，指向vue的实例化对象

{{ msg }}

//再vue原型上面写一个事件总线属性，指向vue的实例化对象

Vue.prototype.$EventBus= newVue()

Vue.component('coma', {

template: `

coma发送

`,

methods: {

sendMsg(){//事件总线

this.$EventBus.$emit('send', '我是coma发送过来的消息')

}

}

})newVue({

el:'#app',

data: {

msg:'我是父亲的msg'},//页面渲染出来了

mounted(){this.$EventBus.$on('send', (msg)=>{ //监听

console.log(msg)this.msg =msg

})

}

})