Vue 传值问题

Vue常见的三种传值方式：

1. 父组件传值给子组件，方法：在父组件中v-bing绑定属性和属性值，在子组件中用 props 接受这个属性；
2. 子组件传值给父组件，方法：在子组件用 this.$emit(事件名，值) 发送，在父组件中用 @事件名="getData" 获取，getData(val)，val即使子组件传递过来的值
3. 兄弟组件传值，方法：借用公共实例组件；或者子传父，父传子

 

这里以兄弟组件传值方法为例，因为会包含父子传值，和子父传值

方法一：借用公共实例组件

• 创建公共实例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组件&nbsp;&nbsp;&nbsp;&nbsp;
    <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组件&nbsp;&nbsp;&nbsp;&nbsp;
    <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>