1.v-model双向绑定和vue2使用并无差别,主要差异在组件上绑定v-model实现数据双向绑定,比自定义指令更加方便一点。
https://cn.vuejs.org/guide/components/v-model.htmlhttp://官网地址:组件v-model
1.组件绑定v-model
//App.vue 父组件
<template>
<h2>组件v-model</h2>
<day14 @emit-click="emitClick" v-model="value1">
</day14>
</template>
<script setup lang="ts">
import day14 from "@/components/Demo/day14.vue";
import { ref, onMounted} from "vue";
let value1 = ref('你好呀')
</script>
//day14.vue 子组件
<template>
<h2>子组件</h2>
//也可以通过@input监听js写法,这里是简写,取自官网,写法都一样
//<input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)"/>
<el-input type="text" placeholder="请输入" v-model="value1" @input="inputValue" />
</template>
<script setup lang="ts">
import { ref } from "vue";
//1.props中接受为啥key是modelValue? 因为v-model没有绑定键名默认为modelValue
//2.emit中接受的为啥key是e: 'update:modelValue',update:是vue固定,:后面是props绑定的key,具体看
// 官网,在这里不细说
//const props = defineProps(['modelValue']) 两种写法都可以
const props = defineProps<{
modelValue: string,
}>()
const emit = defineEmits<{
(e: 'update:modelValue', modelValue: string): void
}>()
//el-input写法,这样子组件更新,父组件的值也会跟着更新
let value1 = ref<string>('');
value1.value = props.modelValue
const inputValue = (e: string) => {
emit('update:modelValue', e)
}
</script>
2.组件上绑定多个v-model:(官网地址)
1.父组件App.vue上在绑定flagVal
<day14 v-model="value1" v-model:flagVal="flag"></day14>
2.子组件上更新props和emit
<script setup lang="ts">
const props = defineProps(['modelValue','flagVal'])
const emit = defineEmits<{
(e: 'update:modelValue', modelValue: string): void
(e: 'update:flagVal', flag: number): void
}>()
//依次类推,在子组件上更改数据方法同图二一样
</script>
3.在组件上处理 v-model
修饰符:(官网地址)
组件的
v-model
上所添加的修饰符,可以通过modelModifiers
prop 在组件内访问到。在下的组件中,我们声明了modelModifiers
这个 prop,它的默认值是一个空对象。如果v-model有key的话就是key后面添加Modifiers,例如:flagValModifiers
<day14 v-model="value1" v-model:flagVal.btn="flag"></day14>
子组件props中声明
<script setup lang="ts">
// flagValModifiers就是flagVal绑定的修饰符btn,可以通过他来做一下判断之类的
const props = defineProps<{
modelValue: string,
flagVal: boolean,
flagValModifiers?: {
btn: boolean
}
}>()
//如果有修饰符就是返回true,没有就是false.这是简单的demo,具体可以看官网地址
console.log(props.flagVal, "参数//", props.flagValModifiers?.btn)
</script>