Vue组件间通信

[heikaimu]

父组件->子组件

parent.vue

<childrenComponent :data='price'></childrenComponent>

export default {
 data() {
  return {
   price: 10
  }
 }
}

children.vue

<p>{{price}}</p>

export default {
 props: {
  price: {
   type: Number,
   default: 0
  }
 }
}

或者

<p>{{price}}</p>

export default {
 props: ['price']
}

有些时候我们需要再父组件直接执行子组件的方法：

parent.vue

<childrenComponent></childrenComponent>

export default {
  mounted() {
    this.$refs.children.handleClick();
  }
}

children.vue

export default {
  methods: {
    handleClick() {
      alert("父组件在执行我");
    }
  }
}

子组件->父组件

parent.vue

<childrenComponent @childrenClick="parentClick"></childrenComponent>

export default {
 methods: {
  parentClick() {
    alert("子组件派发给我的");
  }
 }
}

children.vue

export default {
 methods: {
   handleClick() {
     this.$emit('childrenClick', '');
   }
 }
}

任意组件之间通信

1：使用一个中间件来传递数据信息

2：使用vuex