Vue3组件components上绑定v-model新特性

最新推荐文章于 2025-04-01 14:43:20 发布

看见代码就要慌

最新推荐文章于 2025-04-01 14:43:20 发布

阅读量687

点赞数

分类专栏： Vue 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/m0_53910290/article/details/132364790

版权

Vue 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了Vue2中如何在组件间通过v-model进行数据双向绑定，包括单个v-model的使用、多个v-model的管理以及处理v-model修饰符的方法，通过实例演示了如何在父子组件间传递和更新数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>