vue3 setup語法糖父子元件的通訊

2022-09-14 15:06:18 字數 558 閱讀 7484

在setup語法糖中父子元件的寫法有兩種

1、第一種用defineprops和defineemits

(1) 父元件傳值給子元件,子元件用defineprops接收

父元件**:

helloworld 子元件**:

}

(2) 子元件用 defineemits 傳遞給父元件資訊

helloworld子元件

}增加

父元件

2、父元件使用ref獲取子元件的例項,從而獲取子元件的變數和方法。但是要注意子元件無論是方法還是變數都要用defineexpose暴露出去,否則父元件是接收不到的。

子元件:

我是child1頁面

父元件:

父元件獲取子元件的例項

Vue3新的script setup語法糖

開始使用 不使用script setup語法糖 使用script setup語法糖 引用元件的變更 原先 用語法糖後 元件的引入使用已不再需要components註冊才能使用了,直接引入就可以在tamplate使用了,u1s1,這個更改讓 看起來更舒服簡介了一些 變數使用的變更 原先 count n...

vue3之setup的使用理解

1 vue3中的setup有什麼用?setup的設計是為了使用組合式api 2 為什麼不用之前的元件的選項 data computed methods watch 組織邏輯在大多數情況下都有效。然而,當我們的元件變得更大時,邏輯關注點的列表也會增長。這可能會導致元件難以閱讀和理解,尤其是對於那些一開...

Vue3 0的新語法糖 script setup

基本用法 在conponents目錄下,新建乙個msg.vue vue logo src assets logo.png hello vue 3.0 vite 顯示的結果 比我們之前的export引入,然後components加msg要簡便的多 兩種方式 props和emit 需要先去引入defin...