前端vue3.2组件通信详解(defineExpose、defineEmits、defineProps)使用方式

2年前发布

07060

前言

在做vue项目中，总会遇到组件引入，在嵌套组件中我们的父级组件中引入子级组件中的值，或者在子组件中我们使用父组件中的值。当我们遇到这样的场景我们应该怎么做，在vue2.0中，我们使用props和emit进行父子之间的通信，兄弟之间用事件中央总线(event bus)；在vue3.2的语法中我们则使用defineProps和defineEmits来声明props和emit，用其进行组件之间的传值，那么接下来，我们来看看。

defineProps

用于组件通信中父级组件给子级组件传值，其用来声明props,其接收值为props选项相同的值；
默认支持常见的类型检查，在ts下，我们需要明确变量的类型，类型经常是我们的自定义类型；
只能在 // 子级组件使用defineProps接收值
{{ props.msg }}

/** * 无需导入直接使用 * 写在里面 * defineProps传入的对象key值就是传递的属性，父级传入msg，那么子级接收msg，定义其类型 * @type {Readonly>} * 以下props就是defineProps返回的对象 */ const props = defineProps({ msg: String, }); /** * 如果写在局部 * 报错：Uncaught ReferenceError: defineProps is not defined*/ const btn = function (){ const props = defineProps({ msg: String, }); }

defineEmits

用于组件通信中子级组件向父级组件传值，其用来声明emit，其接收内容于emit选项一致；
只能在 // 父级组件中

import HelloWorld from '@/components/HelloWorld' /** * 在父级组件中，使用子级的自定义事件， * 在html中去写@自定义事件名称=事件名称 * 函数中data是个形参，为子级传递过来的数据 * @param data */ const handleClick = function (data) { console.log(data) }

defineExpose

组件暴露自己的属性以及方法，去供外部使用，常用于父子组件关系；
在vue3.2中 setup 挂载到 script (ref默认是关闭的) 是不能直接使用 ref 取到子组件的方法和变量，需要使用defineExpose。

复制// 不在子组件设置defineExpose
// 子级组件代码

  {{name}}

const name = '张三' // 父级组件代码点击

/** * 父级通常使用ref来定义虚拟dom，用来操作子组件 * 那么这个时候打印ref的value值，我们拿不到子组件的属性以及方法 */ import HelloWorld from '@/components/HelloWorld' import { ref } from "vue"; const childrenDom = ref(null) const handleClick = function () { console.log(childrenDom.value) }

复制// 子组件设置defineExpose
// 子组件代码

  {{name}}

/** * 子组件中设置defineExpose等同于将子组件中的方法以及属性全部做出暴漏 * 只需要父级通过ref去获取就可以 * @type {string} */ const name = '张三'; const btn = function () { console.log(111) } defineExpose({ name, btn }) // 父级组件代码点击 /** * 父级通常使用ref来定义虚拟dom，用来操作子组件 * 那么这个时候打印ref的value值，我们拿不到子组件的属性以及方法 */ import HelloWorld from '@/components/HelloWorld' import { ref } from "vue"; const childrenDom = ref(null) const handleClick = function () { console.log(childrenDom.value) }

以上就是前端vue3.2组件通信详解(defineExpose、defineEmits、defineProps)的使用方式，感谢阅读。

© 版权声明

文章版权归作者所有，未经允许请勿转载。

THE END

喜欢就支持一下吧

相关推荐

评论抢沙发

请登录后发表评论

请登录后查看评论内容