v-model指令
@input =“value = $event"
:value="value"
- 父组件
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<h1>年龄:{{age}}</h1>
<Step @input="value = $event" :value="value"></Step>
<Step v-model="age"></Step>
</div>
</template>
<script>
import Step from '../components/Step.vue'
export default {
name: 'Home',
data() {return {
name : "momo",
age : 18
}},
methods : {
},
components : {
Step
}
}
</script>
<template>
<div class="step">
<input type="text" :value="val" @input="val = $event.target.value;$emit('input',$event.target.value * 1)">
<button @click="val++ ; $emit('input',val)">+</button>
</div>
</template>
<script>
export default {
props : {
value : {type : Number,default : 1}
},
data() {return {
val : this.value
}}
}
</script>
<style>
</style>