1.父子组件之间的传值
父组件
|
<div id="app">
<my-com1 :dat='msg1' @cd='msg3=$event'></my-com1>
<p>这是子组件往父组件传的值：<span>{{msg3}}</span></p>
</div>
//vue实例
var app=new Vue({
el:'#app',
data:{
msg1:{
name:'zhangs',
text:'hahahaha'
},
msg3:''
},
methods:{}
})
|
子组件
|
<template id="tem">
<div>
<p>这是子组件</p>
<p>{{dat.name}}</p>
<p>{{dat.text}}</p>
<button @click='click'>子组件往父组件传值</button>
</div>
</template>
Vue.component('my-com1',{
template:'#tem',
props:['dat'],
data(){
return{
msg2:'这是子组件传给父组件的值'
}
},
methods:{
click(){
this.$emit('cd',this.msg2)
}
}
})
|
总结
|
父传子：子组件用props接受； 子传父：子组件用$emit传出，父组件用$event接收 子组件调用父组件的方法：this.$parent 可以访问到父组件 上所有的 data(){ 里的数据信息和生命周期方法，methods里的方法 }！ |
2、兄弟之间的传值
组件一：
|
Vue.component('xiong-da',{
data(){
return{
eat:'蜂蜜...'
}
},
template: `
<div>
<p>我是熊大</p>
<button @click='passVal'>传值给熊二</button>
</div>
`,
methods:{
passVal(){
// 发送蜂蜜，相当于是发送来一个信息
bus.$emit('xiong',this.eat);
}
}
})
|
组件二：
|
Vue.component('xiong-er',{
data(){
return{
msg:''
}
},
template: `
<div>
<p>我是熊二</p>
<p>熊大传递过来的：{{msg}}</p>
</div>
`,
mounted() {
var _this=this;
// 接收熊大发送过来的信号
bus.$on('xiong',function (val) {
console.log(val)
_this.msg=val
})
},
})
|
总结
|
兄弟组件传值两种方式：
一： 组件一 - 父组件 - 组件二
二： bus（中间vue实例）
$on 接收数据的组件
$emit 发送数据的组件
|