vue3.0组件传值的五种方法（vue3-setup语法糖之组件传参（defineProps、defineEmits、defineExpose））

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> 中声明的绑定)
  
  
  
  
  
  
  
。

可以通过 defineExpose 编译器宏来显式指定在 <script setup> 组件中要暴露出去的属性

子组件：

<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>