vue.js使用v-model實現(xiàn)父子組件間的雙向通信示例
更新時間:2020年02月05日 11:37:17 作者:Sky786905664
這篇文章主要介紹了vue.js使用v-model實現(xiàn)父子組件間的雙向通信,結(jié)合實例形式分析了vue.js基于v-model父子組件間的雙向通信的具體實現(xiàn)技巧,需要的朋友可以參考下
本文實例講述了vue.js使用v-model實現(xiàn)父子組件間的雙向通信。分享給大家供大家參考,具體如下:
<template> <div> 這是主頁面 <h1> {{num}}</h1> <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程序設(shè)計有所幫助。
相關(guān)文章
Vue 頁面跳轉(zhuǎn)不用router-link的實現(xiàn)代碼
這篇文章主要介紹了 Vue 頁面跳轉(zhuǎn)不用router-link的實現(xiàn)代碼,文中給大家介紹了vue router-link跳轉(zhuǎn)傳值示例,需要的朋友可以參考下2018-04-04Vue+Element實現(xiàn)表格編輯、刪除、以及新增行的最優(yōu)方法
這篇文章主要為大家詳細介紹了Vue+Element實現(xiàn)表格的編輯、刪除、以及新增行的最優(yōu)方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-05-05webpack 3 + Vue2 使用dotenv配置多環(huán)境的步驟
這篇文章主要介紹了webpack 3 + Vue2 使用dotenv配置多環(huán)境,env文件在配置文件都可以用, vue頁面用的時候需要在 webpack.base.conf.js 重新配置,需要的朋友可以參考下2023-11-11巧妙運用v-model實現(xiàn)父子組件傳值的方法示例
這篇文章主要介紹了巧妙運用v-model實現(xiàn)父子組件傳值的方法示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-04-04