vue3之自定義事件和自定義修飾符

2021-10-21 02:50:55 字數 1652 閱讀 2256

父元件

// 父元件

"text" v-model:name=

"name"

/>

<

/div>

<

/template>

import child from

"./v-model子元件"

;import

from

"vue"

;export

default;}

, components:,}

;<

/script>

<

/style>

子元件

// 子元件

//可以通過 emits 選項在元件上定義已發出的事件。

}<

/div>

"text" @input=

"update"

/>

<

/template>

"ts"

>

import

from

"vue"

;export

default

,setup

(props:any,);

return;}

,};<

/script>

<

/style>

下面**新增到元件 v-model 的修飾符將通過 modelmodifiers prop 提供給元件。

// 父元件

// 使用自定義修飾符

"text" v-model:name.uppercase=

"name"

/>

<

/div>

<

/template>

import child from

"./v-model子元件"

;import

from

"vue"

;export

default;}

, components:,}

;<

/script>

<

/style>

子元件

}<

/div>

"text" @input=

"update"

/>

<

/template>

"ts"

>

import

from

"vue"

;export

default,}

,// v-model name屬性

name:

null

,// name 的修飾符

namemodifiers:,}

,},setup

(props:any,

)emit

("update:name"

, value);}

;return;}

,};<

/script>

<

/style>

vue自定義元件,插槽,自定義事件

vue.component 自定義元件名 自定義模板 裡面套html標籤,可以取屬性的值 vue.component lover new vue script lover div 自定義元件模板 bitqian標籤 vue.component bitqian new vue script v for...

Vue自定義事件

父元件使用props傳遞資料給子元件,子元件怎麼跟父元件通訊呢?這時,vue的自定義事件就派上用場了。本文將詳細介紹vue自定義事件 每個 vue 例項都實現了事件介面 events inte ce 即 使用 on eventname 監聽事件 使用 emit eventname 觸發事件 注意 v...

vue 自定義事件

vue中自定義的事件,不同於元件和props屬性,事件名沒有任何的大小寫轉換,觸發的事件必須完全匹配這個事件所用的名稱,所以在使用this.emit clicka data 時,clicka必須與定義的事件名一致 當引數為物件時,父元件接收時以及子元件傳參時,最好使用json.parse json....