纳兰性德
  • 微信号:17764149196
您当前的位置:首页  > 前端  > Vue

vue3实现双向绑定

作者:久伴轻尘 时间:2021年08月12日 阅读数:1854

vue3.x版本对比vue2.x版本变化挺大的,双向绑定也由之前版本的一个变为了多个

官网说明

  • 非兼容:用于自定义组件时,v-model prop 和事件默认名称已更改:
    • prop:value -> modelValue
    • event:input -> update:modelValue
  • 非兼容v-bind 的 .sync 修饰符和组件的 model 选项已移除,可用 v-model 作为代替;
  • 新增:现在可以在同一个组件上使用多个 v-model 进行双向绑定;
  • 新增:现在可以自定义 v-model 修饰符。

示例

<template>
    <h1>{{ modelValue }}</h1>
</template>
<script lang='ts'>
import { defineComponent, ref, watch } from 'vue'
export default defineComponent({
    name: 'TestVModel',
    emits: ['update:value'],
    props: { value: String },
    setup(props, { emit }) {
        const modelValue = ref(props.value)
        //数据改变了 通知父组件
        watch(modelValue, (val) => {
            emit('update:value', val)
        })
        //监听插槽值得变化
        watch(() => props.value,(val) => {
             modelValue.value = val
        })
        return {modelValue}
  },
})
</script>
//使用
<test-v-model v-model:value="'hello vue3'"></test-v-model>

用上面同样的方法可以使一个组件有多个v-model存在可以出现 v-model:title v-model:name等等

本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我删除。邮箱:577955659@qq.com

标签: Vue v-model

久伴轻尘

人生若只如初见,何事秋风悲画扇