vue3 组件通信的方式总结

注册组件

// 全局注册组件
import hello from './components/HelloWorld.vue'
app.component('hello',hello)

// 在组件中引入即可使用
import hello from "../../components/HelloWorld.vue";

方法一：defineProps、defineEmits

<hello :msg="msg" @toFather="toFather"></hello>

• 子组件

// 接收参数
let props = defineProps({
  title: Number,
  msg: {
    type: String,
    default: "qq",
  },
});

// 传递参数
const emit = defineEmits(["toFather", "delete"]); // 所有方法一起定义
const change = () => {
  emit("toFather", 11111111);
};
const del = () => {
  emit("delete", 44);
};

方法二：provide、inject

子组件修改值，父组件会跟着一起变

// 父组件
const num = ref(1);
provide("num", num);
// 子组件
const num = inject("num");
console.log(num.value);

方法三：defineExpose 和 ref 属性

• 父组件修改值，子组件会跟着一起变
• 子组件的变量和方法暴露出去，父组件才可以通过ref 属性来调用
• 在mounted之后才可获取到子组件的变量和方法

// 子组件暴露出去
const count = ref(11);
const init = () => {
	console.log(11111)
}
defineExpose({
  count,
  init
});

// 父组件接收
<hello ref="test"></hello>
const test = ref(); // test变量名须保持一致
onMounted(() => {
  console.log(test.value.count); // 父组件获取子组件的变量
  test.value.init() // 父组件调用子组件的方法
});

兄弟组件传值

$ npm install --save vue3-eventbus

import eventBus from 'vue3-eventbus'
app.use(eventBus)

• 组件1注册方法

import bus from 'vue3-eventbus'
bus.on('changeSelectedKeys',val=>{
  this.selectedKeys=[]
  this.selectedKeys.push(val);
})

• 组件2触发方法并传参

import bus from 'vue3-eventbus'
export default {
    created() {
        bus.emit('changeSelectedKeys', '2002')
    }
}