详解 vue3 组件通信defineProps、defineEmits、defineExpose
目录
前言
在做 vue 项目中,总会遇到组件引入,在嵌套组件中我们的父级组件中引入子级组件中的值,或者在子组件中我们使用父组件中的值。当我们遇到这样的场景我们应该怎么做,在 vue2.0 中,我们使用props
和emit
进行父子之间的通信,兄弟之间用事件中央总线(event bus);在 vue3.2 的语法中我们则使用defineProps
和defineEmits
来声明props
和 emit,用其进行组件之间的传值,那么接下来,我们来看看。
defineProps
- 用于组件通信中父级组件给子级组件传值,其用来声明
props
,其接收值为props
选项相同的值; - 默认支持常见的类型检查,在 ts 下,我们需要明确变量的类型,类型经常是我们的自定义类型;
- 只能在
<script setup>
中使用; - 不需要被导入即可使用,它会在编译
<script setup>
语法块时一同编译掉; - 必须在
<script setup>
的顶层使用,不可以在<script setup>
的局部变量中引用; - 不可以访问
<script setup>
中定义的其他变量,因为在编译时整个表达式都会被移到外部的函数中。
/ 父级组件使用自定义属性向下传递值 <div class="home"> <HelloWorld :msg="msg"/> </div> <script setup> import HelloWorld from '@/components/HelloWorld' /** * 父级组件传递一个自定义属性 * 和 props 传递方式一样 * @type {string} */ const msg = '张三'; </script> // 子级组件使用 defineProps 接收值 <div class="hello"> <h1>{{ props.msg }}</h1> </div> <script setup> /** * 无需导入直接使用 * 写在<script setup>里面 * defineProps 传入的对象 key 值就是传递的属性,父级传入 msg,那么子级接收 msg,定义其类型 * @type {Readonly<ExtractPropTypes<{msg: StringConstructor}>>} * 以下 props 就是 defineProps 返回的对象 */ const props = defineProps({ msg: String, }); </script> <script setup> /** * 如果写在局部 * 报错:Uncaught ReferenceError: defineProps is not defined*/ const btn = function (){ const props = defineProps({ msg: String, }); } </script>
defineEmits
- 用于组件通信中子级组件向父级组件传值,其用来声明
emit
,其接收内容于emit
选项一致; - 只能在
<script setup>
中使用; - 不需要被导入即可使用,它会在编译
<script setup>
语法块时一同编译掉; - 必须在
<script setup>
的顶层使用,不可以在<script setup>
的局部变量中引用。
// 子组件 <div class="hello"> <button @click="btn">点击</button> </div> <script setup> /** * 在子组件中使用 defineEmits 来声明 emits * 其接收值与 emit 选项一致 * 传入的选项在全局变量 * emits 函数是 defineEmits 返回值 * defineEmits 函数参数是个数组,数组内容是自定义函数名称 * emits 函数第一个参数是自定义事件名称,第二个参数是需要传递的内容 * defineEmits 如果放在局部。不在全局。则报错 * defineEmits is not defined * @type {EmitFn<string[]>} */ const emits = defineEmits(['handle']); const btn = () => { emits('handle', '张三') } </script> // 父级组件中 <div class="home"> <HelloWorld @handle="handleClick"/> </div <script setup> import HelloWorld from '@/components/HelloWorld' /** * 在父级组件中,使用子级的自定义事件, * 在 html 中去写@自定义事件名称=事件名称 * 函数中 data 是个形参,为子级传递过来的数据 * @param data */ const handleClick = function (data) { console.log(data) } </script>
defineExpose
- 组件暴露自己的属性以及方法,去供外部使用,常用于父子组件关系;
- 在 vue3.2 中
setup
挂载到script
(ref
默认是关闭的) 是不能直接使用ref
取到子组件的方法和变量,需要使用defineExpose
。
// 不在子组件设置 defineExpose // 子级组件代码 <div class="hello"> <h1>{{name}}</h1> </div> <script setup> const name = '张三' </script> // 父级组件代码 <div class="home"> <HelloWorld ref="childrenDom"/> <button @click='handleClick'>点击</button> </div> <script setup> /** * 父级通常使用 ref 来定义虚拟 dom,用来操作子组件 * 那么这个时候打印 ref 的 value 值,我们拿不到子组件的属性以及方法 */ import HelloWorld from '@/components/HelloWorld' import { ref } from "vue"; const childrenDom = ref(null) const handleClick = function () { console.log(childrenDom.value) } </script>
// 子组件设置 defineExpose // 子组件代码 <div class="hello"> <h1>{{name}}</h1> </div> <script setup> /** * 子组件中设置 defineExpose 等同于将子组件中的方法以及属性全部做出暴漏 * 只需要父级通过 ref 去获取就可以 * @type {string} */ const name = '张三'; const btn = function () { console.log(111) } defineExpose({ name, btn }) </script> // 父级组件代码 <div class="home"> <HelloWorld ref="childrenDom"/> <button @click='handleClick'>点击</button> </div> <script setup> /** * 父级通常使用 ref 来定义虚拟 dom,用来操作子组件 * 那么这个时候打印 ref 的 value 值,我们拿不到子组件的属性以及方法 */ import HelloWorld from '@/components/HelloWorld' import { ref } from "vue"; const childrenDom = ref(null) const handleClick = function () { console.log(childrenDom.value) } </script>
以上就是前端 vue3.2 组件通信详解(defineExpose、defineEmits、defineProps)的使用方式,感谢阅读。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 详解 vue3 组件通信defineProps、defineEmits、defineExpose
码云笔记 » 详解 vue3 组件通信defineProps、defineEmits、defineExpose