-
什么是v-model,以及使用方法
-
什么是.sync,以及使用方法
1.什么是v-model
v-model是Vue.js框架中的一个指令，用于在表单元素和Vue实例数据之间双向绑定。它通常用于input、textarea、select等表单元素上。
例如，你可以使用v-model将一个文本框与Vue实例中的一个数据属性绑定起来，当用户在文本框中输入时，这个属性的值也会随之改变；而当Vue实例中的这个数据属性的值改变时，文本框的内容也会自动更新。
<template>
<div>
<input v-model="message" type="text">
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: ''
}
}
}
</script>
上列代码中,在文本框中输入内容,message也会自动更新
v-model的本质是,给文本框绑定了一个value,以及input事件,将值改变之后,触发input事件,然后将value赋值给message.
其他使用场景:
一般会在父子之间涉及到input的传值时候,可以用v-model语法糖来实现,可以使代码更加简便,具体实现如下:
// 父组件
<template>
<children v-model="message"/> // 在子组件上绑定v-model
</template>
<script>
export default {
data(){
return {
message: '11'
}
}
}
</script>
// 子组件
<template>
<input type="text" :value="value" @change="handleChange"/>
</template><script>
export default {
props:{
value:{ // 此处需要用到value接收
type:String,
required: true
}
},
methods:{
handleChange(){
this.$emit('input', 修改的值) // 此处需要用到input事件,然后将需要修改的值填入
}
}
}
</script>
上列代码的意思为,当子组件文本框输入内容的时候,发生改变的时候,就会将你要传的值,给父组件,然后父组件会存到message里面
v-model的传值只能用value吗? 或者只能用input事件吗?
当然不是,下面将介绍使用其他事件的方法
model: { prop: 'checked', event: 'change' },
// 在props前面加这一项,接收值就是checked,监听事件就是change
2.什么是.sync
v-model是Vue.js框架中的一个指令，用于在表单元素和Vue实例数据之间双向绑定。它通常用于input、textarea、select等表单元素上。
例如，你可以使用v-model将一个文本框与Vue实例中的一个数据属性绑定起来，当用户在文本框中输入时，这个属性的值也会随之改变；而当Vue实例中的这个数据属性的值改变时，文本框的内容也会自动更新。
<!-- 父组件 -->
<template>
<div>
<child-component :message.sync="parentMessage"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
parentMessage: ''
}
}
}
</script>
<!-- 子组件 -->
<template>
<div>
<input
:value="message"
@input="$emit('update:message', $event.target.value)">
</div>
</template>
<script>
export default {
props: {
message: ''
}
}
</script>
在上面的代码中，子组件的@input事件将通过$emit方法携带新的值触发“update:message”事件，父组件则通过.sync指令监听该事件，从而实现父子组件之间的双向绑定。
