Vue2
使用
image.png
vue2中，我们通过以下方式实现双向绑定：
<template>
<div class="test">
<input v-model="name">
{{name}}
</div>
</template>
<script>
export default {
name: "Test",
data() {
return {
name: 'yn',
}
}
}
</script>
双向绑定单个值
image.png
CustomInput组件：
<template>
<input type="text" :value="value" @input = "inputChange">
</template>
<script>
export default {
name: "CustomInput",
props: ['value'],
methods: {
inputChange(e) {
this.$emit('input', e.target.value)
}
}
}
</script>
Test组件:
<template>
<div class="test">
<!-- <input type="text" v-model="name">-->
<!-- {{name}}-->
<!-- <br/>-->
<span>自定义组件：</span>
<CustomInput v-model="age"/> <!--此处v-model相当于:value="age" @input="changeAge"-->
<!-- <CustomInput :value="age" @input="changeAge"/>-->
{{age}}
</div>
</template>
<script>
import CustomInput from "./CustomInput";
export default {
name: "Test",
components: {
CustomInput,
},
data() {
return {
// name: 'yn',
age: 20,
}
},
methods: {
changeAge(value) {
this.age = Number(value);
}
}
}
</script>
- 在vue2中，v-model相当于用
value传递了绑定值，用@input事件接收了子组件通过$emit传递的参数。
双向绑定多个值
CustomInput组件：
<template>
<div>
<input :value="value"
@input = "inputChange">
<input :value="name"
@input = "inputNameChange">
</div>
</template>
<script>
export default {
name: "CustomInput",
props: ['value', 'name'],
methods: {
inputChange(e) {
this.$emit('input', e.target.value)
},
inputNameChange(e) {
this.$emit('update:name', e.target.value);
}
}
}
</script>
Test组件：
<template>
<div class="test">
<!-- <input type="text" v-model="name">-->
<!-- {{name}}-->
<!-- <br/>-->
<span>自定义组件：</span>
<CustomInput v-model="age" :name.sync="name"/> <!--此处v-model相当于:value="age" @input="age=$event"-->
</div>
</template>
<script>
import CustomInput from "./CustomInput";
export default {
name: "Test",
components: {
CustomInput,
},
data() {
return {
name: 'yn',
age: 20,
}
},
methods: {
// changeAge(value) {
// this.age = Number(value);
// }
}
}
</script>
Vue3
双向绑定单个值
CustomInput组件：
<template>
<div class='CustomInput'>
<input :value="modelValue"
@input = "inputChange">
</div>
</template>
<script>
export default {
name: 'CustomInput',
props: {
modelValue: String,
},
setup(props, {emit}) {
function inputChange(e) {
emit('update:modelValue', e.target.value)
};
return {
inputChange,
}
}
};
</script>
Test组件：
<template>
<div class='test'>
<CustomInput v-model="name"/>
{{name}}
</div>
</template>
<script>
import CustomInput from './CustomInput';
import { defineComponent, ref} from 'vue';
export default defineComponent({
name: 'test',
components: {
CustomInput
},
setup() {
const name = ref('yn');
return {
name,
}
}
});
</script>
双向绑定多个值
CustomInput组件：
<template>
<div class='CustomInput'>
<input :value="age"
@input = "inputChange">
<input :value="name"
@input = "inputNameChange">
</div>
</template>
<script>
export default {
name: 'CustomInput',
props: {
name: String,
age: Number,
},
setup(props, {emit}) {
function inputChange(e) {
emit('update:age', e.target.value)
};
function inputNameChange(e) {
emit('update:name', e.target.value);
}
return {
inputChange,
inputNameChange,
}
}
};
</script>
Test组件：
<template>
<div class='test'>
<CustomInput v-model:name="name" v-model:age="age"/>
{{name}} {{age}}
</div>
</template>
<script>
import CustomInput from './CustomInput';
import { defineComponent, ref} from 'vue';
export default defineComponent({
name: 'test',
components: {
CustomInput
},
setup() {
const name = ref('yn');
const age = ref(20);
return {
name,
age,
}
}
});
