Vue自定義事件

父元件使用props傳遞資料給子元件，子元件怎麼跟父元件通訊呢？這時，vue的自定義事件就派上用場了。本文將詳細介紹vue自定義事件

每個 vue 例項都實現了事件介面 (events inte***ce)，即

使用 $on(eventname) 監聽事件
使用 $emit(eventname) 觸發事件

[注意]vue 的事件系統分離自瀏覽器的eventtarget api。儘管它們的執行類似，但是$on和$emit不是addeventlistener和dispatchevent的別名

另外，父元件可以在使用子元件的地方直接用v-on來監聽子元件觸發的事件

[注意]不能用$on偵聽子元件丟擲的事件，而必須在模板裡直接用v-on繫結

<
div 
id="example"
>
<
parent
>
parent
>
div>

<
script
>
varchildnode =}
<
/button>`,
data()
},methods:
},}var
parentnode =}
<
/p>
<
child @increment="
incrementtotal
"><
/child>
<
child @increment="
incrementtotal
"><
/child>
<
/div>
`, components: ,
data()
},methods:
}};//建立根例項
newvue(
})script
>

自定義事件的命名約定與元件註冊及props的命名約定都不相同，由於自定義事件實質上也是屬於html的屬性，所以其在html模板中，最好使用中劃線形式

<
child 
@pass-data
="getdata"
>
child
>

而子元件中觸發事件時，同樣使用中劃線形式

this.$emit('pass-data',this.childmsg)

子元件通過$emit可以觸發事件，第乙個引數為要觸發的事件，第二個事件為要傳遞的資料

this.$emit('pass-data',this.childmsg)

父元件通過$on監聽事件，事件處理函式的引數則為接收的資料

getdata(value)

<
div 
id="example"
>
<
parent
>
parent
>
div>

<
script
>
varchildnode =}
<
/p>
<
/div>
`, data()
},methods:
}}varparentnode =}
<
/p>
<
child @pass
-data="
getdata
"><
/child>
<
/div>
`, components: ,
data()
},methods:
}};//建立根例項
newvue(
})script
>

下面示例中，修改子元件中的input值，則父元件到接收到相同值，則顯示出來

在一些情況下，可能會需要對乙個 prop 進行雙向繫結。事實上，這正是vue1.x中的.sync修飾符所提供的功能。當乙個子元件改變了乙個 prop 的值時，這個變化也會同步到父元件中所繫結的值。這很方便，但也會導致問題，因為它破壞了單向資料流的假設。由於子元件改變 prop 的**和普通的狀態改動**毫無區別，當光看子元件的**時，完全不知道它何時悄悄地改變了父元件的狀態。這在 debug 複雜結構的應用時會帶來很高的維護成本，上面所說的正是在 2.0 中移除.sync的理由

從 2.3.0 起重新引入了.sync修飾符，但是這次它只是作為乙個編譯時的語法糖存在。它會被擴充套件為乙個自動更新父元件屬性的v-on偵聽器

<
comp 
:foo.sync
="bar"
>
comp
>

會被擴充套件為：

<
comp 
:foo
="bar"
@update:foo
="val => bar = val"
>
comp
>

當子元件需要更新foo的值時，它需要顯式地觸發乙個更新事件：

this.$emit('update:foo', newvalue)

因此，可以使用.sync來簡化自定義事件的操作，實現子元件向父元件的資料傳遞

<
div 
id="example"
>
<
parent
>
parent
>
div>
<
script 
src=""
>
script
>
<
script
>
varchildnode =}
<
/div>
<
input v
-model="
childmsg
">
<
button @click
=add 
>+
1<
/button>
<
/div>
`, data()
},methods:
}};varparentnode =}
<
/p>
<
child :foo.sync="
msg"
><
/child>
<
/div>
`, components: ,
data()
}};//建立根例項
newvue(
})script
>

Vue自定義事件

vue 自定義事件

Vue 自定義事件

vue自定義事件

Vue自定義事件

vue 自定義事件

Vue 自定義事件

vue自定義事件

相關推薦