vue3-setup语法糖之组件传参（defineProps、defineEmits、defineExpose）(vue3setup语法糖如何定义realtive数据)

vue3-setup语法糖之组件传参（defineProps、defineEmits、defineExpose）

推荐整理分享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> 中