vue3官方文档：https://cn.vuejs.org/api/sfc-script-setup#defineprops-defineemits 为了在声明 props 和 emits 选项时获得完整的类型推导支持，我们可以使用 defineProps 和 defineEmits API，它们将自动地在 `<script setup>` 中可用。 ~~~ <script setup> const props = defineProps({ foo: String }) const emit = defineEmits(['change', 'delete']) // setup 代码 </script> ~~~ • 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' // 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 官方地址：https://cn.vuejs.org/api/sfc-script-setup#defineexpose 使用 `<script setup>` 的组件是默认关闭的(即通过模板引用或者 $parent 链获取到的组件的公开实例不会暴露任何在 `<script setup>` 中声明的绑定)。 可以通过 defineExpose 编译器宏来显式指定在 `<script setup>` 组件中要暴露出去的属性 ~~~ <script setup> import { ref } from 'vue' const a = 1 const b = ref(2) defineExpose({ a, b }) </script> ~~~ 当父组件通过模板引用的方式获取到当前组件的实例，获取到的实例会像这样 `{ a: number, b: number }` (ref 会和在普通实例中一样被自动解包) #### 子组件 ~~~ <template> <div> <p>我是子组件</p> </div> </template> <script setup> import { ref } from 'vue'; const stext = ref('我是子组件的值') const sfunction = ()=>{ console.log("我是子组件的方法") } defineExpose({ stext, sfunction }) </script> ~~~ #### 父组件 ~~~ <template> <div class="todo-container"> <p>我是父组件</p> <son ref="sonDom"></son> <button @click="getSonDom">点击</button> </div> </template> <script setup> import { ref ,nextTick} from 'vue'; import son from './components/son.vue' const sonDom = ref(null) //注意这里的命名要和ref上面的命名一致 const getSonDom = ()=>{ console.log("sonDom",sonDom.value) } //直接打印sonDom的值是拿不到的子组件节点还没生成 nextTick(()=>{ console.log("sonDom",sonDom.value) }) </script> ~~~ **参考文档** • http://681314.com/A/ALrwxAyxzY