Vue深入了解元件(三) 自定義事件

2021-10-04 07:31:58 字數 1496 閱讀 7938

監聽事件和prop屬性名稱方面不太一樣,prop屬性名若是駝峰命名,在元件呼叫賦值的時候需要改為key-base的樣式,但是監聽事件的不會,寫啥是啥。

--

----

----

----

----元件中的觸發**

this

.$emit

('myevent')--

----

----

----

----呼叫時的監聽**

<

!-- 沒有效果 --

>

"dosomething"

>

<

/my-component>

<

!-- 有效果的 --

>

"dosomething"

>

<

/my-component>

html大小寫不敏感,巨尷尬,所以在前端屬性命名這個事情上盡量去使用key-base的格式,不要用駝峰。

首先理解一下v-model

v-model=v-on:input+v-bind:value

//也就是

這樣就實現了雙向繫結。

當我們給元件棒v-model的時候,首先元件的props需要乙個乙個value屬性來接收父元件到子元件的值,其次如果子元件中是input,那麼我們需要在子元件中寫乙個input觸發事件,從而觸發乙個名字叫做input的自定義事件。

------------------------

vue.component('custom-input', )

官網示例用到了乙個叫model的塊,具體如下:

vue.component('base-checkbox', ,

props: ,

template: `

`})----------------

原生事件:就是input、change、click…等等這一類的。

對於給元件設定響應事件,有倆種方式一種是定義自定義的事件、一種是現在要說的,第一種請自行翻閱之前寫的。

.native這個修飾符的作用:

它的作用是在某個元件的根元素上監聽乙個原生事件。可以使用v-on:+原生事件名稱+.native。給普通的html標籤監聽乙個事件,之後新增 .native 修飾符是不會起作用的。

但是如果元件中要被監聽的標籤元素不是元件的根節點,那麼它將不會有任何作用也不會報錯。怎麼解決呢?

當元件的根元素不具備一些dom事件,但是根元素內部元素具備相對應的dom事件,那麼可以使用$listeners獲取父元件傳遞進來的所有事件函式,再通過v-on="***x"繫結到相對應的內部元素上即可。

找了個例子:原生事件繫結vue元件解析

深入了解vue自定義元件之插槽slot

vue插槽官方文件位址 vue中,自定義元件一般只需要新建乙個vue模板檔案,根據需求定義元件樣式即可,如下 自定義元件檔案 mycomponent.vue 引用部分 這樣就可以子定義乙個一般的元件 但是好多時候我們需要在自定義的元件放入其他div或者其他元件 修改引用部分,自定義元件加入乙個p標籤...

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

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

Vue元件中自定義事件

當我們需要在操作元件後引起元件之外的元素發生變化時,就需要是這裡的內容。比如 當選中書後,自動顯示您選中的書名。其中書籍列表是使用元件寫的。顯示選中書籍名是在元件之外。在新增事件的時候需要注意一下事項 1 在定義元件時 vue.component 元件名,在子元件中正常呼叫該事件,但是在需要與父元件...