Vue自定义事件
父組件使用props傳遞數據給子組件，子組件怎么跟父組件通信呢？這時，Vue的自定義事件就派上用場了。
1、自定義事件
每個Vue創建的實例都會出現一個事件接口
var vm = new Vue({el: '#app'})- 自定義事件的定義(發布)
- //自定義事件的觸發 （ 訂閱 ）
2、自定義事件的數據傳遞
我們通過下面代碼分析一下自定義事件的數據傳遞
<body><div id="app"><Father></Father></div><template id="father"><div><h3>這里是父組件</h3><p>兒子給我{{ money}} </p><Son @hongbao="givemoney"></Son></div></template><template id="son"><div><h3>這里是子組件</h3><button @click="give">給父親紅包</button></div></template> </body><script>Vue.component('Father',{template:'#father',data(){return {money:0,}},methods:{//自定義事件的定義(發布)givemoney(val){this.money=val;}}});Vue.component('Son',{template:'#son',data(){return {money:3000,}},methods:{//自定義事件的觸發 （ 訂閱 ）give(){console.log(this.money)this.$emit('hongbao',this.money)}}})new Vue({}).$mount('#app')從上述代碼可以看出，父組件通過$on監聽事件，事件處理函數的參數則為接收的數據
methods:{//自定義事件的定義(發布)givemoney(val){this.money=val;}}子組件通過$emit可以觸發事件，第一個參數為要觸發的事件，第二個事件為要傳遞的數據
methods:{//自定義事件的觸發 （ 訂閱 ）give(){console.log(this.money)this.$emit('hongbao',this.money)}}總結
- 上一篇： java上传文件到FTP服务器
- 下一篇： vue 引入字体文件