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程序設計有所幫助。
相關文章
這篇文章主要為大家詳細介紹了Vue-Quill-Editor富文本編輯器的使用教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-09-09
下面小編就為大家分享一篇vue2.0安裝style/css loader的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue 頁面跳轉(zhuǎn)不用router-link的實現(xiàn)代碼
這篇文章主要介紹了 Vue 頁面跳轉(zhuǎn)不用router-link的實現(xiàn)代碼，文中給大家介紹了vue router-link跳轉(zhuǎn)傳值示例,需要的朋友可以參考下2018-04-04
VueJs 提供了強大的過濾器API，能夠?qū)?shù)據(jù)進行各種過濾處理，返回需要的結(jié)果。這篇文章主要給大家介紹vue 過濾器filter實例，感興趣的朋友跟隨腳本之家小編一起學習吧2018-03-03
Vue+Element實現(xiàn)表格編輯、刪除、以及新增行的最優(yōu)方法
這篇文章主要為大家詳細介紹了Vue+Element實現(xiàn)表格的編輯、刪除、以及新增行的最優(yōu)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
webpack 3 + Vue2 使用dotenv配置多環(huán)境的步驟
這篇文章主要介紹了webpack 3 + Vue2 使用dotenv配置多環(huán)境,env文件在配置文件都可以用, vue頁面用的時候需要在 webpack.base.conf.js 重新配置,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了vue自定義全局組件(自定義插件)的用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要為大家詳細介紹了使用Vue3封裝一個通用echarts組件詳解的相關知識,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-02-02
這篇文章主要為大家詳細介紹了vue+springboot實現(xiàn)登錄驗證碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
巧妙運用v-model實現(xiàn)父子組件傳值的方法示例
這篇文章主要介紹了巧妙運用v-model實現(xiàn)父子組件傳值的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04