Vue2 的双向绑定用法
v-model
父组件 App.vue
v-model 减少了很多代码，不用你手动把传过来的值赋值给 haha 了，少定义了一个方法。
<template>
<div id="app">
<!-- <child :value="haha" @input="onInput" /> -->
<!-- 下面语法糖 -->
<child v-model="haha" />
<div>{{haha}}</div>
</div>
</template>
<script>
import Child from '@/components/Child.vue'
export default {
name: 'App',
components: { Child },
data() {
return {
haha: '66666'
}
}
// 下面语法糖
// methods: {
// onInput(e) {
// this.haha = e
// }
// }
}
</script>
子组件 Child.vue
<template>
<div>
输入
<!-- <input v-bind:value="value" v-on:input="input"/> -->
<!-- 下面语法糖 -->
<input :value="value" @input="input" />
</div>
</template>
<script>
export default {
name: 'Child',
props: {
value: { type: [String, Number] }
},
methods: {
input(e) {
this.$emit('input', e.target.value)
}
}
}
</script>
.sync
父组件 App.vue
<template>
<div>
<p>父组件：{{value}}</p>
<child :foo.sync="value"/>
<!-- 两者等效 -->
<!-- <child v-bind:foo="value" v-on:update:foo="val => foo = value" /> -->
</div>
</template>
<script>
import Child from './Child.vue';
export default {
components:{Child},
data(){
return {
value: ""
}
}
}
</script>
子组件 Child.vue
<template>
<div>
<input type="text" :value="foo" @input="$emit('update:foo', $event.target.value)" />
</div>
</template>
<script>
export default {
props: ["foo"]
};
</script>