vue 使用template 有什么作用 vue template key

转载

码海航行侠 2024-04-12 12:40:44

文章标签 vue.js javascript 前端修饰符双向绑定 文章分类 机器学习人工智能

Vue3 模板中的变化

vue3 模板中的变化主要有以下变化：

模板必须是单根节点
双向绑定的变化
v-if 与 v-for 优先级与 key 值的变化

1.Fragment

vue2 中组件的模板必须是单根节点，出现多个根节点会报错。

而如果 vue3 组件的模板中出现多个根节点时，会自动将这些节点用fragment包裹，所以 vue3 模板可出现多个根节点。

2.v-model 双向绑定的变化

vue2 中提供了两种双向绑定：v-model和.sync，但在 vue3 中，去掉了.sync修饰符，只能使用v-model进行双向绑定。

但为了让v-model更好的针对多个属性进行双向绑定，vue3 作出了以下变化：

当对自定义组件使用v-model指令时，绑定的默认属性名由原来的value变为modelValue，默认事件名由原来的input变为update:modelValue

<!-- vue2 默认props属性为value 默认emit事件为input-->
<ChildComponent :value="title" @input="title = $event" />
<!-- 简写为 -->
<ChildComponent v-model="title" />

<!-- vue3 默认props属性为modelValue 默认emit事件为update:modelValue -->
<ChildComponent :modelValue="title" @update:modelValue="title = $event" />

<!-- 简写为 -->
<ChildComponent v-model="title" />

去掉了.sync修饰符，它原本的功能由v-model的参数替代

<!-- vue2 -->
<ChildComponent :title="title" @update:title="title = $event" />
<!-- 简写为 -->
<ChildComponent :title.sync="title" />

<!-- vue3 -->
<ChildComponent :title="title" @update:title="title = $event" />
<!-- 简写为 -->
<ChildComponent v-model:title="title" />

v-model 在组件之间使用时，vue2 中子组件可通过model配置属性与事件名，但在 vue3 中移除了model配置属性。
允许自定义v-model修饰符（vue2 无此功能)

vue 使用template 有什么作用 vue template key_修饰符

使用案例：自定义 v-model 修饰符capitalize，它会自动将 v-model 绑定输入的字符串值第一个字母转为大写：

<!-- 父组件 -->
<MyComponent v-model.capitalize="myText" />

当 v-model 不存在参数时，子组件通过modelModifiers这个 prop 属性名访问自定义修饰符，它默认值是一个空对象。

当 v-model 存在参数时，子组件的 prop 名将是{{arg}}+Modifiers，子组件将通过该属性名访问修饰符。如：父组件为<MyComponent v-model:title.capitalize="myText">时，此时 prop 名为titleModifiers。

<!-- 子组件 -->
<template>
  <input type="text" :value="modelValue" @input="emitValue" />
</template>

<script>
import {defineProps,defineEmits} from 'vue';
setup(){
  //声明相应的属性与事件名
  const props = defineProps({
    modelValue: String,
    modelModifiers: { default: () => ({}) }
  })
  const emit = defineEmits(['update:modelValue'])

  function emitValue(e) {
    let value = e.target.value
    //props.modelModifiers.capitalize = true 表示自定义v-model修饰符capitalize 存在
    if (props.modelModifiers.capitalize) {
      value = value.charAt(0).toUpperCase() + value.slice(1)
    }
    emit('update:modelValue', value)
  }
}
</script>