【Vue3】Vue3中常用的组件传参方式

props/$emit

父传子 (自定义属性 props)

//  父组件代码
<Son :name="test"/>
// 子组件代码
<div>{{ name }}div>
props: {
    name: {
      type: String,
      default: "default",
    },
}

子传父（自定义this.$emit）

// 子组件代码
<button @click="handleClick">子组件按钮button>
  methods: {
    handleClick() {
      this.$emit("handleSon", "test");
    },
  },
// 父组件代码
<Son  @handleSon="sonFunction" />
  methods: {
    sonFunction(value) {
      this.text = value;
    },
 },

ref

父传子

// 父组件
<button @click="fatherButton">父按钮button>
<Son ref="sonRef" />
 methods: {
    fatherButton() {
      // 可以拿到子组件所有的信息
      console.log(this.$refs.sonRef)
      this.$refs.sonRef.sonFunciton("test");
    },
},
// 子组件
<div>子组件{{ name }}div>
 methods: {
    sonFunciton(value) {
      console.log(value);
      this.name = value;
    },
},

子传父（如果子组件是公共组件，需判断父组件是否具有该方法）

// 父组件
fatherFunction(value) {
    this.text = value;
},
// 子组件
<button @click="sonButton">子组件按钮button>
 sonButton() {
       // this.$parent  拿到父组件所有的信息 跟ref类似
      this.$parent.fatherFunction("test");
},

Vuex数据共享

// 注册代码
const store = new Vue.Store({
  state:{
    count: 100
  },
  mutations: {
    addCount(state, val = 1) {
      state.count += val;
    }，
    subCount(state, val = 1) {
      state.count -= val;
    }
  }
})

// 组件调用
this.$store.commit('addCount');  // 加 1
this.$store.commit('subCount');  // 减 1

依赖注入provide/Inject

父组件
  provide: {
    sonMsg: "test",
  },

下级组件
<div @click="toVal">子组件{{ sonMsg}}div>

inject: ["sonmsg"]