Vue3中不同于Vue2的一些注意事项

举报
KevinQ 发表于 2023/04/26 18:22:04 2023/04/26
【摘要】 透传Attributes功能在vue2中不记得有这一点。换句话说,就是单个根节点的子组件,会自动使用父组件中给子组件定义的class、style等属性,也可以使用自定义的属性,在子组件中可以通过$attrs,this.$attrs来取值。并且根据这一节的描述,Vue3是支持多个根节点的组件的。 增加了emits属性通过该属性,显式地来表明组件触发的事件:export default { ...

透传Attributes功能

在vue2中不记得有这一点。换句话说,就是单个根节点的子组件,会自动使用父组件中给子组件定义的class、style等属性,也可以使用自定义的属性,在子组件中可以通过$attrsthis.$attrs来取值。

并且根据这一节的描述,Vue3是支持多个根节点的组件的。

增加了emits属性

通过该属性,显式地来表明组件触发的事件:

export default {
  emits: ['inFocus', 'submit']
}

并支持对触发事件的参数进行验证:

export default {
  emits: {
    submit(payload) {
      // 通过返回值为 `true` 还是为 `false` 来判断
      // 验证是否通过
    },
    // 校验 submit 事件 
    // 返回一个布尔值来表明事件是否合法。
    submitEmail: ({ email, password }) => { 
	    if (email && password) {
		    return true 
		} else { 
			console.warn('Invalid submit event payload!');
			return false 
		} 
	}
  }
}

v-model的书写方式变更

在Vue3中,需要按照如下方式来实现默认的v-model

<!-- CustomInput.vue -->
<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue']
}
</script>

<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

使用时:

<CustomInput v-model="searchText" />

也支持定义多个v-model的值,看示例代码:

<!-- UserName.vue -->
<script>
export default {
  props: {
    firstName: String,
    lastName: String
  },
  emits: ['update:firstName', 'update:lastName']
}
</script>

<template>
  <input
    type="text"
    :value="firstName"
    @input="$emit('update:firstName', $event.target.value)"
  />
  <input
    type="text"
    :value="lastName"
    @input="$emit('update:lastName', $event.target.value)"
  />
</template>

使用方式:

<UserName
  v-model:first-name="first"
  v-model:last-name="last"
/>

其中的抛出事件也可以改为通过计算属性来抛出,我个人喜欢这种方式,更灵活。

<!-- CustomInput.vue -->
<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  computed: {
    value: {
      get() {
        return this.modelValue
      },
      set(value) {
        this.$emit('update:modelValue', value)
      }
    }
  }
}
</script>

<template>
  <input v-model="value" />
</template>

并且支持v-model的自定义修饰符。例如其中的capitalize修饰符:

<MyComponent v-model.capitalize="myText" />

具体实现方式如下,注意,若带有修饰符,则子组件中的this.modelModifiers.capitalizetrue

<script>
export default {
  props: {
    modelValue: String,
    modelModifiers: {
      default: () => ({})
    }
  },
  emits: ['update:modelValue'],
  methods: {
    emitValue(e) {
      let value = e.target.value
      if (this.modelModifiers.capitalize) {
        // 
        value = value.charAt(0).toUpperCase() + value.slice(1)
      }
      this.$emit('update:modelValue', value)
    }
  }
}
</script>

<template>
  <input type="text" :value="modelValue" @input="emitValue" />
</template>

依赖注入

根据文档描述,父/祖父等组件使用provide来提供数据,子组件使用inject来使用,并且注入会在组件自身状态之前被解析。
并且在vue3.3之前,需设置app.config.unwrapInjectedRef = true以及computed函数来使注入具有响应式。

关于组合式API

这里想说一句,Vue3也支持选项式API,换句话说,Vue2的代码一般情况下是可以在Vue3中正常运行的。

vue3具名插槽的使用方式

在vue2中可以按照如下方式使用

<child>
	<template slot="header"></template>
</child>

而在vue3中需要按照如下方式使用

<child>
	<template #header></template>
</child>

或者

<child>
	<template v-slot:header></template>
</child>

全局变量的实现方式

在vue2中,可以通过如下方式定义:

Vue.prototype.$method = method

<!-- 使用 -->
this.$method...

在vue3中,按照如下方式:

import { createApp } from 'vue'  
import App from './App.vue'
const app = createApp(App)
app.config.globalProperties.$method = method


一个常用组件 el-date-picker中日期格式的转变

基于vue2的element组件中的el-date-pickervalue-formate表示取值的格式,默认的日期类型可以书写成:yyyy-MM-dd

而基于vue3的element-plus,默认日期类型为:YYYY-MM-DD,所有格式可以从Day.js查看。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。