Vue父子组件和非父子组件传值问题

Posted 2020-10-31 心向阳

父组件跟子组件之间的传值（具体参考lonzhubb商城）

1、父组件传值给子组件形式，ifshop是要传的对象，右边ifshop代表要传的这个对象的数据

<v-select  :ifshop="ifshop"  :clickType="clickType" @close="close" @addShop="sureAddShop"></v-select>

2、子组件接收父组件的数据用props

 

props: {

 ifshop:{
      type:Boolean,
      default (){
           return false
      }
}

}

3、子组件调用父组件

methods: {
close:function(){
this.$emit(‘close‘);
},

非父组件跟子组件之间的传值

之间值

在main.js建一个空的Vue实例

//购物车组件信息交互
Vue.prototype.shopbus = new Vue();

在组件A中传递参数

 this.shopbus.$emit(‘goodsCount‘,this.myCount)

 

在组件B中接收参数

      this.shopbus.$on(‘goodsCount‘, (myCount) => {}