位置: IT常识 - 正文
vue3-setup语法糖之组件传参（defineProps、defineEmits、defineExpose）(vue3setup语法糖如何定义realtive数据)
编辑：rootadminvue3-setup语法糖之组件传参（defineProps、defineEmits、defineExpose） 
本文链接地址:https://www.jiuchutong.com/zhishi/296080.html
转载请保留说明！
推荐整理分享vue3-setup语法糖之组件传参（defineProps、defineEmits、defineExpose）(vue3setup语法糖如何定义realtive数据)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue3setup语法糖beforerouteenter,vue3setup语法糖props传值,vue3setup语法糖beforerouteenter,vue3setup语法糖beforerouteenter,vue3setup语法糖 钩子函数,vue3setup语法糖生命周期,vue3setup语法糖 props,vue3setup语法糖 钩子函数,内容如对您有帮助，希望把文章链接给更多的朋友！
vue3官方文档
defineProps 和 defineEmits 都是只能在 <script setup> 中使用的编译器宏。他们不需要导入，且会随着 <script setup> 的处理过程一同被编译掉。
defineProps 接收与 props 选项相同的值，defineEmits 接收与 emits 选项相同的值。
父传子 - defineProps
父组件
<template> <div class="Father"> <p>我是父组件</p> <!-- --> <son :ftext="ftext"></son> </div></template><script setup>import {ref} from 'vue'import Son from './son.vue'const ftext = ref('我是父组件-text')</script>子组件
<template> <div class="Son"> <p>我是子组件</p> <!-- 展示来自父组件的值 --> <p>接收到的值：{{ftext}}</p> </div></template><script setup>import {ref} from 'vue'// setup 语法糖写法//defineProps 来接收组件的传值const props = defineProps({ ftext: { type:String },})</script>子传父 - defineEmits
子组件：
<template> <div class="Son"> <p>我是子组件</p> <button @click="toValue">点击给父组件传值</button> </div></template><script setup>import {ref} from 'vue'// setup 语法糖写法//用defineEmits()来定义子组件要抛出的方法,语法defineEmits(['要抛出的方法'])const emit = defineEmits(['exposeData'])const stext = ref('我是子组件的值-ftext')const toValue = ()=>{ emit('exposeData',stext)}</script>父组件：
<template> <div class="Father"> <p>我是父组件</p> <!-- --> <son @exposeData="getData" :ftext="ftext"></son> </div></template><script setup>import {ref} from 'vue'import Son from './son.vue'const ftext = ref('我是父组件-text')const getData = (val)=>{ console.log("接收子组件的值",val)}</script>defineExpose
官方解释：
使用 <script setup> 的组件是默认关闭的(即通过模板引用或者 $parent 链获取到的组件的公开实例，不会暴露任何在 <script setup> 中
上一篇：新安webpack插件后编译报错compiler.plugin is not a function(webpack插件执行顺序)
