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