vue3之provide、inject多代传值、子传父方法

vue3 中多代之间传值

1. vue3 依赖注入方式

• 通过 provide 方式提供数据

  import { provide } from 'vue'
  setup() {
    provide('father',110)
  }

• 其他组件通过 inject 接收

  import { inject } from 'vue'
  setup() {
    console.log(inject('father')) //110
  }

2. 可以使用 eventBus 传值（相对麻烦，不在叙述）他人文章：
   vue 篇之事件总线（EventBus）

vue3 中子传父

• 与 vue2 中子传父逻辑相同，子组件通过发送自定义事件向父组件传值
• 子组件 child.vue
  <button @click='son'>点击</button>

// 注意：setup 中无法获取 this ，context 获取上下文
 setup(props, context) {
    const son = () => {
      context.emit("change", 50);
    };
    return {
      son
    }
 }

• 父组件 father.vue
  <Child @change="myChange" />

  setup(){
    const myChange=(val)=>{
      console.log(val) // 50
    }
    return {myChange}
  }