Vue3元件傳參

2021-10-25 18:41:54 字數 2209 閱讀 7571

總結沒啥好說的,淦就完事了,按照自己的認知簡單的整理了一下vue3的元件傳參……

**如下 (示例):

>

>

子元件: @click

="childemit"

>

傳值給父元件button

>

div>

template

>

>

export

default

)return}}

;script

>

>

>

父元件 @my-emit

="parentemit"

>

child

>

div>

template

>

>

import child from

"./child.vue"

;import

from

"vue"

;export

default

,setup()

return},

};script

>

看一下執行結果:

value

props

不可變的元件引數

context

vue3暴露出來的屬性(emit,slots,attrs)

所以訪問就變成了這種形式:

this.*** ====》context.***

**如下 (示例):

>

>

>

}div

>

>

}div

>

div>

template

>

>

import

from

'vue'

export

default

,setup

(props)

)return}}

script

>

>

:msg

="msg"

>

child

>

template

>

>

import child from

'./child.vue'

import

from

'vue'

export

default

,setup()

}}script

>

看一下執行結果:

**如下 (示例):

>

ref=

"helloworld"

>

child

>

template

>

>

import child from

'./child.vue'

import

from

'vue'

export

default

,setup()

)provide

('promsg'

,state)

return}}

script

>

>

>

>

}h1>

div>

template

>

>

import

from

'vue'

export

default}}

script

>

看一下執行結果:

provide,inject用法和之前vue2用法沒什麼區別,哦豁一把嗦~~~

以上就是今天要講的內容,本文僅僅簡單介紹了元件之間的傳參,後續其他內容會繼續補充。

Vue 3 元件註冊

上一節實驗中,我們大概了解了一下元件的基礎,這一節實驗我們要深入元件註冊。我們在註冊元件的時候,我們都會給元件起乙個名字,就好像我們人的名字一樣。需要注意的是,我們的元件名字是有一些規範的,一般這種單檔案元件,我們強烈推薦使用字母全小寫且必須包含乙個連字元,全部小寫字母,單詞使用中華線 隔開。例如我...

vue3 元件通訊 vue router

關於元件通訊 1.父子元件間傳值 props emit parent children ref 2.非父子元件傳值 事件匯流排 原理就是建立乙個公共的js檔案,專門用來傳遞資訊 import vue from vue export default new vue 在需要傳遞訊息的地方引入 impor...

vue3 元件的v model實現

在vue2中,v model val 是 value val 和 input val event.target.value 的語法糖 vue2的自定義元件的v model input元件 父元件 子元件 特殊的元件,比如checkbox元件,通過model屬性指定prop引數和event事件 父元件...