Vue元件中自定義事件

2022-07-20 11:15:19 字數 1525 閱讀 4801

當我們需要在操作元件後引起元件之外的元素發生變化時,就需要是這裡的內容。比如:當選中書後,自動顯示您選中的書名。其中書籍列表是使用元件寫的。顯示選中書籍名是在元件之外。

在新增事件的時候需要注意一下事項:

1、在定義元件時`vue.component(元件名,`,

在子元件中正常呼叫該事件,但是在需要與父元件聯絡時,需要在該事件中寫第2條的資訊。

2、在需要出發事件的時候,呼叫`this.emit('事件的名稱',引數(可以是多個))

3、在使用這個元件的時候,繫結下事件,語法和之前繫結是一樣的,比如:@father-click="fatherclick",

@事件名稱=父元件中事件。

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

meta

name

="viewport"

content

="width=device-width, initial-scale=1.0"

>

<

script

src=""

>

script

>

<

title

>vue元件中自定義事件

title

>

head

>

<

body

>

<

div

id>

<

child-template

v-for

="book in books"

:book

="book"

@father-click

="fatherclick"

>

child-template

>

<

p>你選中了:}

p>

div>

<

script

>

vue.component(

"child-template

", }

<

/label>

<

input type="

checkbox

"@click="

oncheck

">

<

/div>

`, methods:

},})

newvue(,,,

,],

checkbooks:

},methods:

else}}

})script

>

body

>

html

>

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

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

Vue元件之實現自定義事件

自定義事件本質是由子元件向父元件傳遞資訊 1 子元件,觸發click點選事件時,通過 emit 觸發父元件裡自定義的事件defclick template div role alert class el alert changealert,is center is light i class el ...

vue子元件的自定義事件

父子元件的資訊傳遞無礙就是父元件給子元件傳值 props和 attrs 和父元件觸發子元件的事件 emit 之前已經談過了父元件給子元件傳值了,現在來說說父元件觸發子元件的自定義事件吧 實際上挺簡單 父元件 template div my child abcclick sayhello my chi...