讓組件與父元素溝通的$emit和v | Vue $emit $event
嗨!讓我抓住禮拜天的尾巴,繼續研究Vue.js吧XD,之後就要分心處理React了,那廢話不多說,分隔線下進入正文!對父級做事件處理首先提一下關於組件的事件處理,昨天有在文章中提到官方的一個例子:HTML
目前點了{{count}}下
`})letdemoCounter=newVue(...
嗨!讓我抓住禮拜天的尾巴,繼續研究Vue.js吧XD,之後就要分心處理React了,那廢話不多說,分隔線下進入正文!
對父級做事件處理首先提一下關於組件的事件處理,昨天有在文章中提到官方的一個例子:HTML
<div id="demoCounter"> <button-counter></button-counter> </div>JavaScript
Vue.component(button-counter,{ data:()=>{ return { count:0, } }, template:`<div> <button @click="count++">Click me</button> <span>目前點了{{count}}下</span> </div>` }) let demoCounter = new Vue({ el:#demoCounter, })上方在設定組件時我們把事件寫再button的@click裡面,讓他被點擊時可以把count加1,但是這僅僅於組件控制組件的資料而已,試著想想當把count的值放到demoCounter的data中時,組件內的事件該怎麼控制count加1呢?如果遇到這種情況可以使用Vue.js中的內建方法$emit傳入事件名字,讓他對父層組件demoCounter觸發用v-on綁定的事件名稱:HTML
<div id="demoCounter"> <!--再使用組件時設定組件內部監聽的$emit事件名稱來觸發父組件的事件--> <button-counter @add-count="addCount"></button-counter> <!-...