讲讲Vue3的v-model语法糖~(内含Vue2写法的回顾)

42 篇文章 1 订阅
26 篇文章 0 订阅

写在前面

        晚上好呀朋友们,最近做了一个Vue3的项目,可能最近会多多写有关于Vue3的知识点。

        本文会写到Vue3中v-model的语法糖原理,以及回顾Vue2中V-model的知识点。

Vue3中v-model新的特性

        1.在Vue3中,v-model的本质是 :modelValue 和 @update:modelValue 两者的绑定

        示例代码:

        父组件

<template>
  <div>
    <div>v-model指令用法-Vue3(父组件)</div>
    <hr>
    <div>{{info}}</div>
+    <!-- <TestEvent v-model='info' /> -->
+    <TestEvent :modelValue='info' @update:modelValue='info=$event' />
  </div>
</template>

<script>
import TestEvent from './TextEvent.vue'
import { ref } from 'vue'

export default {
  name: 'App',
  components: { TestEvent },
  setup () {
    const info = ref('hello')
    return { info }
  }
}
</script>

        子组件:

<template>
  <div>
    子组件 {{modelValue}}
  </div>
  <button @click='handleEdit'>点击</button>
</template>
<script>
export default {
  name: 'TestEvent',
  props: {
+    // Vue3中,v-model默认绑定的属性名称是modelValue
+    modelValue: {
+      type: String,
+      default: ''
    }
  },
  setup (props, context) {
    const handleEdit = () => {
      // props.modelValue = 'nihao'
      // 通知父组件修改数据
      // .sync修饰符:update:绑定的属性名称
+      context.emit('update:modelValue', 'nihao')
    }
    return { handleEdit }
  }
}
</script>

        2.v-model可以使用多次

        示例代码:

        父组件

<template>
  <div>
    <div>v-model指令用法-Vue3(父组件)</div>
    <hr>
    <div>{{info}}</div>
    <div>{{msg}}</div>
    <!-- v-model提供了一种双向绑定机制(在组件上-父子之间的数据交互) -->
    <!-- .sync修饰符已经被废弃,替代方案是v-model -->
    <!-- <TestEvent v-model='info' :msg.sync='msg' /> -->
+    <TestEvent v-model:modelValue='info' v-model:msg='msg' />
+    <!-- <TestEvent :modelValue='info' @update:modelValue='info=$event' /> -->
  </div>
</template>

<script>
import TestEvent from './TextEvent.vue'
import { ref } from 'vue'

export default {
  name: 'App',
  components: { TestEvent },
  setup () {
    const info = ref('hello')
    const msg = ref('hi')

    return { info, msg }
  }
}
</script>

        子组件

<template>
  <div>
    子组件 {{modelValue}}
  </div>
  <button @click='handleEdit'>点击</button>
</template>
<script>
export default {
  name: 'TestEvent',
  props: {
    // Vue3中,v-model默认绑定的属性名称是modelValue
    modelValue: {
      type: String,
      default: ''
    },
    msg: {
      type: String,
      default: ''
    }
  },
  setup (props, context) {
    const handleEdit = () => {
      // props.modelValue = 'nihao'
      // 通知父组件修改数据
      // .sync修饰符:update:绑定的属性名称
+      context.emit('update:modelValue', 'nihao')
+      context.emit('update:msg', 'coniqiwa')
    }
    return { handleEdit }
  }
}
</script>

        总结

        1、v-model可以通过绑定多个属性的方式,向子组件传递多个值并且保证双向绑定

        2、可以替代Vue2中sync修饰符(sync修饰符在Vue3中已经被废弃)

Vue2中v-model的应用场景

        示例代码:   

<template>
  <div>
    <div>v-model指令用法-Vue2</div>
    <hr>
    <div>{{uname}}</div>
    用户名:<input type="text" v-model='uname'>
    <!-- v-model的本质是属性绑定和事件绑定的结合 -->
    <input type="text" :value='uname' @input='uname=$event.target.value'>
    <!-- ---------------------------------------------------------------- -->
    <!-- v-model也可以使用到组件上 -->
    <my-com v-model='info'></my-com>
    <!-- 此时 $event表示子组件传递的具体数据 this.$emit('input', 100) -->
    <my-com :value='info' @input='info=$event'></my-com>
    <!-- Vue2中$event有两层含义 -->
    <!-- 1. 如果是原始DOM的事件,那么$event表示js的原生事件对象 -->
    <!-- 2、如果是组件的自定义事件,那么$event是$emit传递的数据 -->
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'App',
  setup () {
    const uname = ref('tom')
    return { uname }
  }
}
</script>

        总结

        1、用到表单元素上:$event表示事件对象

        2、用到组件上:$event表示子组件传递的数据

写在最后

        朋友们,以上就是今天的所有内容啦。下期再见~

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3 中,你可以使用 `setup` 语法糖来实现子组件向父组件传递数据和更新父组件的 `v-model`。下面是一个示例: ```vue <template> <div> <!-- 子组件 --> <ChildComponent v-model="childValue" /> <p>子组件的值: {{ childValue }}</p> </div> </template> <script> import { ref } from 'vue'; import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, setup() { const childValue = ref(''); return { childValue }; } }; </script> ``` 在这个例子中,`ChildComponent` 是子组件,它接收一个 `v-model` 绑定的值 `childValue`。在父组件中,我们使用 `setup` 函数来定义一个名为 `childValue` 的响应式变量,并将其传递给子组件。子组件可以通过修改 `childValue` 来更新父组件的值。 在子组件中,你可以通过 `props` 接收 `childValue` 并将其绑定到一个内部变量上。然后,你可以在子组件中使用 `$emit` 来向父组件发送更新事件。 ```vue <template> <div> <input type="text" :value="value" @input="updateValue($event.target.value)" /> </div> </template> <script> export default { props: ['value'], methods: { updateValue(newValue) { this.$emit('update:value', newValue); } } }; </script> ``` 在子组件中,我们将 `value` 属性绑定到输入框的值,并通过 `@input` 事件监听输入框的变化。当输入框的值发生变化时,我们调用 `updateValue` 方法,并使用 `$emit` 发送一个名为 `update:value` 的事件,将新的值传递给父组件。 这样,在父组件中,我们就可以通过监听子组件发出的 `update:value` 事件来更新父组件的值,并且这个更新会通过 `v-model` 双向绑定到子组件上。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值