Vue常见的三种传值方式:
- 父组件传值给子组件,方法:在父组件中v-bing绑定属性和属性值,在子组件中用 props 接受这个属性;
- 子组件传值给父组件,方法:在子组件用 this.$emit(事件名,值) 发送,在父组件中用 @事件名="getData" 获取,getData(val),val即使子组件传递过来的值
- 兄弟组件传值,方法:借用公共实例组件;或者子传父,父传子
这里以兄弟组件传值方法为例,因为会包含父子传值,和子父传值
方法一:借用公共实例组件
- 创建公共实例bus.js
- 组件A中通过 Bus.$emit(事件名,值) 传递
- 组件B中,在created中通过 Bus.$on('事件名',(val)=>{}) 接收,注意this指向
公共实例:bus.js
import Vue from 'vue'
export default new Vue();
组件unitA.vue
<template>
<div>
A组件
<Button @click="send">点击向B组件传递数据</Button>
</div>
</template>
<script>
import Bus from './bus.js'
export default {
data(){
return{
msg:10
}
},
methods:{
send(){
Bus.$emit('sendMsg',this.msg++);
}
}
}
</script>
组件unitB.vue
<template>
<div>
B组件
<span>A组件传递过来的数据 {{num}}</span>
</div>
</template>
<script>
import Bus from './bus.js'
export default {
data(){
return{
num:0
}
},
created(){
let _this = this;
Bus.$on('sendMsg',(val)=>{
_this.num = val
})
},
methods:{
}
}
</script>
展示效果:
<template>
<div style="padding:20px;">
<div>
<UnitA/>
<br>
<UnitB/>
</div>
</div>
</template>
<script>
import UnitA from './templete2/unitA.vue'
import UnitB from './templete2/unitB.vue'
export default {
components:{
UnitA,
UnitB
},
data(){
return{
}
}
}
</script>
方法二:子传父,父传子
- 先用 this.$emit(事件名,值) 传值给父组件
- 先获取子组件传递过来的值@事件名="getData" ,然后在另一个组件上绑定属性
- 另一个组件利用props接收这个属性
子组件:A.vue
<template>
<div>
A组件
<Button type="primary" @click="send">点击向B组件传递数据</Button>
</div>
</template>
<script>
export default {
data(){
return{
num:10
}
},
methods:{
send(){
this.$emit('sendMsg',this.num++)
}
}
}
</script>
父组件: page.vue
<template>
<div>
statusPage1
<A @sendMsg='getData'/>
<br>
<B :num = 'msg'/>
</div>
</template>
<script>
import A from './templete/A.vue'
import B from './templete/B.vue'
export default {
components:{
B,
A
},
data(){
return{
msg:0,
}
},
methods:{
getData(val){
this.msg = val
},
}
}
</script>
子组件:B.vue
<template>
<div>
B组件 {{num}}
</div>
</template>
<script>
export default {
props:{
num:Number
},
data(){
return{
}
},
}
</script>
注意,子组件不可直接修改父组件传递过来的值,否则会报错。可通过watch监听这个值,然后赋值给内部的变量。
如下,B.vue
<template>
<div>
B组件 {{num}}
<Button @click="change">改变父组件传递过来的值</Button>
<span >{{newNum}}</span>
</div>
</template>
<script>
export default {
props:{
num:Number
},
data(){
return{
newNum:this.num // 重新赋值,避免直接操作父组件传过来的值
}
},
// 监听父组件传递过来的值,给内部的变量重新赋值
watch:{
num:function(){
this.newNum = this.num;
}
},
methods:{
change(){
if(this.newNum>15){
// 操作内部的值
this.newNum = 15
}
}
}
}
</script>