v-model
input的双向数据绑定
在input中使用v-model实现双向数据绑定
v-model 是动态属性绑定 v-bind 与 input事件的语法糖
<input type="text" v-model="iptValue" />
下面的写法和上面是一样的:监听输入框的input事件,视图变化通知修改实例中的值;由于v-bind绑定了属性,当实例中的值改变,input中绑定的值也会变化
<input type="text" :value="iptValue" @input="iptChange" />
<div>展示一下iptValue的变化情况:{{ iptValue }}</div>
<button @click="modifyIptValue">修改input中的值</button>
data() {
return {
iptValue: ''
}
},
methods: {
iptChange(e) {
this.iptValue = e.target.value
},
modifyIptValue() {
this.iptValue = '手动修改了input的value'
},
}
这种基本使用在vue2和vue3中使用是一样的
vue2中父子组件的双向数据绑定
简单的父子双向数据绑定
vue中父组件传给子组件的是单项数据流,一般情况下不让我们在子组件中修改父组件中的变量
当然我们可以通过属性绑定和$emit
、 $on
,this.$parent.key=value等来实现通信;v-model只是其中一种方式.
如果父组件给子组件的值既需要使用,而且还要修改;我们就可以使用v-model简化props/v-bind和 emit与on
1》父组件:将需要双向绑定的属性值用v-model绑定
<modelChild v-model="num" />
<button @click="changeNum">父组件来修改</button>
methods: {
modifyNum() {
this.num=88
}
}
2》子组件:通过model属性说明双向绑定的是那个属性,触发修改的事件是什么;当我们修改时,只需通过this.$emit将值传过去
<template>
<div class="child">
<div>子组件接收:{{ num }}</div>
<button @click="modifyNum">修改num</button>
</div>
</template>
<script>
export default {
model: {
prop: 'num',
event: 'change'
},
props: {
num: {
type: Number,
}
},
methods: {
modifyNum() {
this.$emit('change', Math.random())
}
}
}
</script>
.sync修饰符的使用
当我们需要同时实现多个属性的双向绑定,此时我们就可以使用.sync修饰符,搭档v-bind
父组件:
<modelChild :str.sync="str" :num.sync="num" />
子组件:$emit传递的是:update:propName,而且不需要model属性了,这里与v-model有点不一样;
<div>子组件接收:{{ num }}---{{ str }}</div>
<button @click="modifyNum">修改num</button>
<button @click="modifyStr">修改字符串</button>
props: {
num: {
type: Number
},
str: {
type: String
}
},
methods: {
modifyNum() {
this.$emit('update:num', Math.random())
},
modifyStr() {
this.$emit('update:str', '修改后的str')
}
}
vue3中v-model
基本使用还是和vue2中一样;
不过vue3中不再使用.sync了;将 .sync和 v-model功能合并,如果想实现子组件与父组件的双向数据绑定
父组件:使用v-model:propName 绑定
<template>
<div>
<h1>父组件{{ num }}--{{ str }}</h1>
<button @click="changeNumStr">父组件修改</button>
<TestChildren v-model:num="num" v-model:str="str" />
</div>
</template>
<script>
import { defineComponent, ref, defineAsyncComponent } from 'vue'
export default defineComponent({
components: {
TestChildren: defineAsyncComponent(() =>
import('./components/testChild.vue')
),
},
setup() {
let num = ref(0)
let str = ref('hello')
function changeNumStr() {
num.value--
str.value = '父组件修改后的str'
}
return {
num,
str,
changeNumStr,
}
},
})
</script>
子组件:props接收传递过来的属性,props通过 context.emit(‘update:propName’,value)来修改
<template>
<div>{{ num }}----{{ str }}</div>
<button @click="changeNum(999)">修改num</button>
<button @click="changeStr('子组件修后的str')">修改str</button>
</template>
<script>
import { defineComponent, toRefs } from 'vue'
export default defineComponent({
props: {
num: {
type: Number,
default: 0,
},
str: {
type: String,
default: '',
},
},
setup(props, context) {
function changeStr(newStr) {
context.emit('update:str', newStr)
}
function changeNum(val) {
context.emit('update:num', val)
}
return { ...toRefs(props), changeStr, changeNum }
},
})
</script>