![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue中的组件通信
Sinornor
一个喜欢学习知识,却总也记不住的二刺程序猿
展开
-
Vue中组件通信:兄弟间传递事件总线
new一个新的vue实例,用on和emit来对事件进行传输。Vue3官方有推荐一些库,例如 mitt。封装eventBus.js。在需要使用的组件中导入。原创 2023-04-04 14:23:56 · 319 阅读 · 0 评论 -
Vue中组件通信:子传父emit
vue3中无法直接使用$emits,需要使用const emit = defineEmits(['(对应方法名)'])的方式来向父组件传递信息,一般在onMounted(() => {})中去执行传递方法的事件,如:emit("getMsg", "我来自子组件"),然后父组件在子组件上使用@getMsg="showMsg"的方式来获取传入的信息,注意:getMsg是对应的子组件的方法名,此方法名称自定义,showMsg为父组件的方法名称也可以自定义。原创 2023-04-04 14:14:41 · 192 阅读 · 0 评论 -
Vue中组件通信:父传子ref
在父组件中可以使用ref="(el) => child = el"的方式来准确获取到子组件的实例,然后使用child.value.(对应方法名或变量名)的方式获取相应信息。vue3中需要引入defineExpose从子组件向父组件暴露需要获取到的对应的变量或方法。引用信息会注册在父组件的$refs对象上。原创 2023-04-04 13:44:10 · 325 阅读 · 0 评论 -
Vue中组件通信:父传子props
父组件使用自定义属性,然后子组件使用props。原创 2023-04-04 13:33:20 · 40 阅读 · 0 评论