當我們需要在操作元件後引起元件之外的元素發生變化時,就需要是這裡的內容。比如:當選中書後,自動顯示您選中的書名。其中書籍列表是使用元件寫的。顯示選中書籍名是在元件之外。
在新增事件的時候需要注意一下事項:
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...