Vue.js基礎(chǔ)之監(jiān)聽子組件事件v-on及綁定數(shù)據(jù)v-model學(xué)習(xí)
1. 監(jiān)聽子組件觸發(fā)的事件(v-on)
說明
父組件可以在使用子組件的地方直接用 v-on 來監(jiān)聽子組件觸發(fā)的事件
完整示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CROW-宋</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <div id="counter-event-example"> <p>蜀國新兵:{{ total }} 萬</p> <!-- 打印三個(gè)按鈕,每個(gè)綁定 "incrementTotal"以計(jì)算total值 --> <button-counter v-on:increment="incrementTotal"></button-counter> 漢中招兵<br> <button-counter v-on:increment="incrementTotal"></button-counter> 益州招兵<br> <button-counter v-on:increment="incrementTotal"></button-counter> 蜀郡招兵<br> </div> </div> <script> // 注冊組件 Vue.component('button-counter', { //綁定incrementHandler函數(shù)以計(jì)算counter值,在按鈕中打印counter值 template: '<button v-on:click="incrementHandler">{{ counter }}</button>', data: function () { return { counter: 0 } }, //為組件提供 counter的計(jì)算 methods: { incrementHandler: function () { this.counter += 1 //子組件中使用$emit方法調(diào)用該事件并傳參 this.$emit('increment') } }, }) new Vue({ el: '#counter-event-example', data: { total: 0 }, methods: { incrementTotal: function () { this.total += 1 } } }) </script> </body> </html>
結(jié)果顯示
2. 雙向綁定prop和 子組件數(shù)據(jù)(v-model)
說明
組件上的 v-model 默認(rèn)會(huì)利用名為 value 的 prop 和名為 input 的事件
完整示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CROW-宋</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <we-input v-model="num"></we-input> <p>輸入的數(shù)字為:{{num}}</p> </div> <script> Vue.component('we-input', { template: ` <p> <input ref="input" :value="value" @input="$emit('input', $event.target.value)" > </p> `, props: ['value'], }) new Vue({ el: '#app', data: { num: 100, } }) </script> </body> </html>
說明:
ref="input"
:獲取input的值:value="value"
:
即v-bind:value 單向綁定data中的數(shù)據(jù)到input上(給input一個(gè)初始值,之后input改變,data不會(huì)跟隨改變。)@input="$emit('input', $event.target.value)"
:
讓父組件監(jiān)聽到自定義事件 $emit( eventName, […args] )
結(jié)果顯示
以上就是Vue.js基礎(chǔ)之監(jiān)聽子組件事件v-on及綁定數(shù)據(jù)v-model學(xué)習(xí)的詳細(xì)內(nèi)容,更多關(guān)于Vue監(jiān)聽綁定子組件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Vue3使用ResizeObserver監(jiān)聽元素的尺寸寬度變化
要監(jiān)聽 div 寬度的變化,可以使用 ResizeObserver 接口,ResizeObserver 允許你觀察一個(gè)或多個(gè)元素的尺寸變化,并在發(fā)生變化時(shí)執(zhí)行回調(diào)函數(shù),所以本文給大家介紹了Vue3如何使用ResizeObserver監(jiān)聽元素的尺寸寬度變化,需要的朋友可以參考下2024-08-08vue使用recorder.js實(shí)現(xiàn)錄音功能
這篇文章主要為大家詳細(xì)介紹了vue使用recorder.js實(shí)現(xiàn)錄音功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-11-11vue中img src 動(dòng)態(tài)加載本地json的圖片路徑寫法
這篇文章主要介紹了vue中的img src 動(dòng)態(tài)加載本地json的圖片路徑寫法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04vue3 開始時(shí)間與結(jié)束時(shí)間比較驗(yàn)證(結(jié)束時(shí)間需要大于開始時(shí)間)
本文通過示例代碼介紹了vue3 開始時(shí)間與結(jié)束時(shí)間比較驗(yàn)證(結(jié)束時(shí)間需要大于開始時(shí)間)的相關(guān)操作,代碼簡單易懂,感興趣的朋友跟隨小編一起看看吧2024-07-07解決使用Vue.js顯示數(shù)據(jù)的時(shí),頁面閃現(xiàn)原始代碼的問題
下面小編就為大家分享一篇解決使用Vue.js顯示數(shù)據(jù)的時(shí),頁面閃現(xiàn)原始代碼的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02vue3+element-plus 實(shí)現(xiàn)動(dòng)態(tài)菜單和動(dòng)態(tài)路由的渲染的項(xiàng)目實(shí)踐
本文主要介紹了vue3+element-plus 實(shí)現(xiàn)動(dòng)態(tài)菜單和動(dòng)態(tài)路由的渲染的項(xiàng)目實(shí)踐,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-11-11詳解vue3結(jié)合ts項(xiàng)目中使用mockjs
這篇文章主要為大家介紹了vue3結(jié)合ts項(xiàng)目中使用mockjs示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07