在vue3中,v-model可以一次绑定多个啦。撒花放炮~~~~
本篇文章是基于vue3知识点下的,v-model一个双向数据绑定的示例
示例
//父组件
<template>
<two v-model:name="user.name" v-model:sex="user.sex"></two>
<div style="background-color: #2C3E50;color: #fff;padding: 20px;margin: 10px;">
<p>一级的值:{{user.name}}是一个{{user.sex}}</p>
<button @click="changeUser">一级按钮</button>
</div>
</template>
<script>
import two from './components/two.vue'
import {
reactive,
defineComponent
} from 'vue'
export default defineComponent({
name: 'lycApp',
components: {
two
},
setup(prop, context) { //context相当于之前的this
const user = reactive({
name: 'lyc',
sex: 'girl'
})
const changeUser = () => {
user.name = 'zyx'
user.sex = 'boy'
}
return {
user,
changeUser
}
}
})
</script>
//子组件
<template>
<div style="background-color: cadetblue;color: #fff;padding: 20px;margin: 10px;">
<p>二级的值:{{name}}是一个{{sex}}</p>
<input type="text" :value="name" @input="changeName" placeholder="姓名" ref="refName"/>
<input type="text" :value="sex" @input="changeAge" placeholder="性别" ref="refSex"/>
</div>
</template>
<script>
import {ref} from 'vue'
export default{
name:'two',
props:['name','sex'],
setup(props,context){
const refName = ref() //获取input为name的值
const refSex = ref() //获取input为sex的值
const changeName = ()=>{
context.emit('update:name',refName.value.value) //关键点
}
const changeAge = ()=>{
context.emit('update:sex',refSex.value.value)//关键点
}
return {
refName,
refSex,
changeName,
changeAge
}
}
}
</script>
<style>
</style>
//效果图
点击一级按钮,一二级的值都会改变。在二级的input中输入值,会改变所有对应参数里面的值