vue-组件双向绑定--v-model的原理

v-model指令

• @input =“value = $event"
• :value="value"
• 父组件

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
	<h1>年龄：{{age}}</h1>
	<!-- 使用v-model绑定一个事件，发送一个数据 -->
	<Step @input="value = $event" :value="value"></Step>
	<!-- 上面的跟下面的相同  -->
	<Step   v-model="age"></Step>
  </div>
</template>
<!-- @input="age = $event" -->
<!-- :value="age" -->
<!-- v-model="age" 就相当于这个-->

<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">
		<!-- 接收value的值 -->
		<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>