小編給大家分享一下vue.js如何使用v-model實現(xiàn)父子組件間的雙向通信,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
1、能夠嵌入動態(tài)文本于HTML頁面。2、對瀏覽器事件做出響應(yīng)。3、讀寫HTML元素。4、在數(shù)據(jù)被提交到服務(wù)器之前驗證數(shù)據(jù)。5、檢測訪客的瀏覽器信息。6、控制cookies,包括創(chuàng)建和修改等。7、基于Node.js技術(shù)進行服務(wù)器端編程。
具體如下:
<template> <div> 這是主頁面 <h2> {{num}}</h2> <button @click="handleMins">-1</button> <hr> <!-- 作者:786905664@qq.com 時間:2017-09-24 描述:局部組件 --> <com v-model="num"></com> </div> </template>
<script> import son from './test1' var com={ template:'<div>{{msg}}<button @click="handleAdd">+1</button>{{currentNum}}</div>', data(){ return{ msg:'我是局部組件', currentNum:this.value } }, props:{ value:{//這里必須是value type:Number } }, methods:{ handleAdd(){ this.currentNum++; this.$emit('input',this.currentNum)//這里必須是input } }, watch:{ value(val){ this.currentNum=val } } } export default { components:{com}, data(){ return{ msg:'', show:'', num:0 } }, methods:{ showson(e){ this.show=e }, handleMins(){ this.num-- } } } </script>
看完了這篇文章,相信你對“vue.js如何使用v-model實現(xiàn)父子組件間的雙向通信”有了一定的了解,如果想了解更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!
名稱欄目:vue.js如何使用v-model實現(xiàn)父子組件間的雙向通信-創(chuàng)新互聯(lián)
本文鏈接:http://www.ekvhdxd.cn/article44/cdciee.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站制作、響應(yīng)式網(wǎng)站、自適應(yīng)網(wǎng)站、網(wǎng)站設(shè)計公司、關(guān)鍵詞優(yōu)化、商城網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)