Vue3从入门到精通(二)

  • Vue3从入门到精通(二)已关闭评论
  • 96 次浏览
  • A+
所属分类:Web前端
摘要

在Vue3中,侦听器的使用方式与Vue2相同,可以使用 watch 选项或 $watch 方法来创建侦听器。不同之处在于,Vue3中取消了 immediate 选项,同时提供了新的选项和API。


vue3 侦听器

在Vue3中,侦听器的使用方式与Vue2相同,可以使用watch选项或$watch方法来创建侦听器。不同之处在于,Vue3中取消了immediate选项,同时提供了新的选项和API。

  1. 创建侦听器

可以使用watch选项或$watch方法来创建侦听器,语法与Vue2相同。示例如下:

<template>   <div>{{ message }}</div> </template> ​ <script> export default {   data() {     return {       message: 'Hello, Vue3!'     }   },   watch: {     message(newValue, oldValue) {       console.log(`New value: ${newValue}, old value: ${oldValue}`)     }   } } </script>

上面的代码中,使用watch选项来创建侦听器,当message的值发生变化时,会触发侦听器函数。

  1. 侦听多个属性

在Vue3中,可以使用数组的方式侦听多个属性。示例如下:

<template>   <div>{{ fullName }}</div> </template> ​ <script> export default {   data() {     return {       firstName: 'John',       lastName: 'Doe'     }   },   watch: {     ['firstName', 'lastName'](newValues, oldValues) {       console.log(`New values: ${newValues}, old values: ${oldValues}`)     }   },   computed: {     fullName() {       return `${this.firstName} ${this.lastName}`     }   } } </script>

上面的代码中,使用数组的方式侦听firstNamelastName两个属性,当它们的值发生变化时,会触发侦听器函数。

  1. 深度侦听

在Vue3中,可以使用deep选项来实现深度侦听。示例如下:

<template>   <div>{{ user.name }}</div> </template> ​ <script> export default {   data() {     return {       user: {         name: 'John Doe',         age: 30       }     }   },   watch: {     user: {       handler(newValue, oldValue) {         console.log(`New value: ${JSON.stringify(newValue)}, old value: ${JSON.stringify(oldValue)}`)       },       deep: true     }   } } </script>

上面的代码中,使用deep选项来实现深度侦听user对象的所有属性,当user对象的任何属性发生变化时,都会触发侦听器函数。

  1. 取消侦听器

在Vue3中,可以使用watch选项返回的取消函数来取消侦听器。示例如下:

<template>   <div>{{ message }}</div> </template> ​ <script> export default {   data() {     return {       message: 'Hello, Vue3!'     }   },   mounted() {     const unwatch = this.$watch('message', (newValue, oldValue) => {       console.log(`New value: ${newValue}, old value: ${oldValue}`)     }) ​     setTimeout(() => {       unwatch()     }, 5000)   } } </script>

上面的代码中,使用$watch方法创建侦听器,并将返回的取消函数存储在unwatch变量中,在5秒后调用取消函数,取消侦听器。

vue3 表单输入绑定

在Vue3中,表单输入绑定的方式与Vue2相同,可以使用v-model指令来实现。不同之处在于,Vue3中取消了.sync修饰符,同时提供了新的修饰符和API。

  1. 基本用法

使用v-model指令可以将表单元素的值与组件的数据进行双向绑定。示例如下:

<template>   <div>     <input type="text" v-model="message">     <p>{{ message }}</p>   </div> </template> ​ <script> export default {   data() {     return {       message: ''     }   } } </script>

上面的代码中,将input元素的值与message数据进行双向绑定,当input元素的值发生变化时,message数据也会跟着变化,同时p元素中展示message数据的值。

  1. 修饰符

在Vue3中,提供了新的修饰符来实现更灵活的表单输入绑定。

  • .lazy修饰符:在输入框失去焦点或按下回车键后才更新数据。示例如下:

<template>   <div>     <input type="text" v-model.lazy="message">     <p>{{ message }}</p>   </div> </template> ​ <script> export default {   data() {     return {       message: ''     }   } } </script>

上面的代码中,使用.lazy修饰符将输入框的值在失去焦点或按下回车键后才更新message数据。

  • .trim修饰符:去除输入框的首尾空格。示例如下:

<template>   <div>     <input type="text" v-model.trim="message">     <p>{{ message }}</p>   </div> </template> ​ <script> export default {   data() {     return {       message: ''     }   } } </script>

上面的代码中,使用.trim修饰符去除输入框的首尾空格,并将处理后的值绑定到message数据上。

  • .number修饰符:将输入框的值转换为数字类型。示例如下:

<template>   <div>     <input type="text" v-model.number="age">     <p>{{ age }}</p>   </div> </template> ​ <script> export default {   data() {     return {       age: 0     }   } } </script>

上面的代码中,使用.number修饰符将输入框的值转换为数字类型,并将转换后的值绑定到age数据上。

  1. 自定义组件

在自定义组件中,可以使用v-model指令来实现自定义组件的双向绑定。示例如下:

<template>   <div>     <my-input v-model="message"></my-input>     <p>{{ message }}</p>   </div> </template> ​ <script> import MyInput from './MyInput.vue' ​ export default {   components: {     MyInput   },   data() {     return {       message: ''     }   } } </script>

上面的代码中,使用v-model指令将my-input组件的值与message数据进行双向绑定,当my-input组件的值发生变化时,message数据也会跟着变化,同时p元素中展示message数据的值。需要注意的是,my-input组件内部需要使用$emit方法触发input事件来实现数据的更新。

vue3 模板引用

在Vue3中,模板引用使用ref来实现。ref可以用来获取组件实例或DOM元素的引用,并将其绑定到组件实例的数据上。

  1. 组件引用

在Vue3中,使用ref可以获取到组件实例的引用。示例如下:

<template>   <div>     <my-component ref="myComponent"></my-component>   </div> </template> ​ <script> import MyComponent from './MyComponent.vue' ​ export default {   components: {     MyComponent   },   mounted() {     console.log(this.$refs.myComponent) // 输出组件实例   } } </script>

上面的代码中,使用ref获取到my-component组件的实例,并将其绑定到myComponent数据上。在mounted钩子函数中,可以通过this.$refs.myComponent获取到组件实例,并进行操作。

  1. DOM元素引用

在Vue3中,使用ref可以获取到DOM元素的引用。示例如下:

<template>   <div>     <input type="text" ref="myInput">   </div> </template> ​ <script> export default {   mounted() {     console.log(this.$refs.myInput) // 输出DOM元素   } } </script>

上面的代码中,使用ref获取到input元素的引用,并将其绑定到myInput数据上。在mounted钩子函数中,可以通过this.$refs.myInput获取到DOM元素,并进行操作。

需要注意的是,在Vue3中,ref只能绑定到组件实例或DOM元素上,不能绑定到普通数据上。

vue3 组件组成

在Vue3中,组件由三部分组成:模板、逻辑和样式。其中,模板和逻辑与Vue2中的组件相同,而样式方面,Vue3推荐使用CSS Modules和CSS Variables来实现。

  1. 模板

组件的模板与Vue2中的模板相同,使用template标签来定义。示例如下:

<template>   <div>     <h1>{{ title }}</h1>     <p>{{ content }}</p>   </div> </template> ​ <script> export default {   data() {     return {       title: 'Hello, Vue3!',       content: 'Vue3 is awesome!'     }   } } </script>

上面的代码中,定义了一个简单的组件模板,包含一个标题和一段文本内容,使用双花括号绑定数据。

  1. 逻辑

组件的逻辑与Vue2中的逻辑相同,使用script标签来定义。示例如下:

<template>   <div>     <h1>{{ title }}</h1>     <p>{{ content }}</p>   </div> </template> ​ <script> export default {   data() {     return {       title: 'Hello, Vue3!',       content: 'Vue3 is awesome!'     }   },   methods: {     handleClick() {       console.log('clicked')     }   } } </script>

上面的代码中,定义了一个简单的组件逻辑,包含一个data数据对象和一个handleClick方法。

  1. 样式

在Vue3中,推荐使用CSS Modules和CSS Variables来实现组件样式。CSS Modules可以避免全局样式的污染,而CSS Variables可以实现更灵活的样式控制。

使用CSS Modules时,可以在style标签中设置module属性来启用CSS Modules。示例如下:

<template>   <div class="wrapper">     <h1 class="title">{{ title }}</h1>     <p class="content">{{ content }}</p>   </div> </template> ​ <script> export default {   data() {     return {       title: 'Hello, Vue3!',       content: 'Vue3 is awesome!'     }   } } </script> ​ <style module> .wrapper {   padding: 20px;   background-color: #f5f5f5; } ​ .title {   font-size: 24px;   color: var(--primary-color); } ​ .content {   font-size: 16px;   color: #333; } </style>

上面的代码中,使用CSS Modules设置了.wrapper.title.content三个类的样式,并使用CSS Variables设置了--primary-color变量的值。

需要注意的是,使用CSS Modules时,类名会被自动转换为唯一的类名,可以通过$style来引用。示例如下:

<template>   <div :class="$style.wrapper">     <h1 :class="$style.title">{{ title }}</h1>     <p :class="$style.content">{{ content }}</p>   </div> </template> ​ <script> export default {   data() {     return {       title: 'Hello, Vue3!',       content: 'Vue3 is awesome!'     }   } } </script> ​ <style module> .wrapper {   padding: 20px;   background-color: #f5f5f5; } ​ .title {   font-size: 24px;   color: var(--primary-color); } ​ .content {   font-size: 16px;   color: #333; } </style>

上面的代码中,使用$style引用了.wrapper.title.content三个类的样式。

vue3 组件嵌套关系

在Vue3中,组件嵌套关系与Vue2中的组件嵌套关系相同,通过在模板中嵌套组件来实现。

例如,有两个组件ParentChild,其中Parent组件中嵌套了Child组件。示例如下:

<template>   <div>     <h1>{{ title }}</h1>     <child :content="content"></child>   </div> </template> ​ <script> import Child from './Child.vue' ​ export default {   components: {     Child   },   data() {     return {       title: 'Parent Component',       content: 'This is the content of Parent Component.'     }   } } </script>

上面的代码中,Parent组件中通过<child>标签嵌套了Child组件,并将content数据传递给Child组件。

Child组件的代码如下:

<template>   <div>     <h2>{{ title }}</h2>     <p>{{ content }}</p>   </div> </template> ​ <script> export default {   props: {     content: {       type: String,       default: ''     }   },   data() {     return {       title: 'Child Component'     }   } } </script>

上面的代码中,Child组件接收了Parent组件传递的content数据,并在模板中展示出来。

需要注意的是,当组件嵌套层级较深时,可以使用provideinject来实现跨层级传递数据,避免层层传递数据的麻烦。

vue3 组件注册方式

在Vue3中,组件注册方式与Vue2中的组件注册方式有所不同,Vue3提供了defineComponent函数来定义组件。具体步骤如下:

  1. 创建组件

使用defineComponent函数创建组件,示例如下:

import { defineComponent } from 'vue' ​ export default defineComponent({   name: 'MyComponent',   props: {     content: {       type: String,       default: ''     }   },   setup(props) {     return {       title: 'My Component',       handleClick() {         console.log('clicked')       }     }   },   template: `     <div>       <h1>{{ title }}</h1>       <p>{{ content }}</p>       <button @click="handleClick">Click Me</button>     </div>   ` })

上面的代码中,使用defineComponent函数定义了一个名为MyComponent的组件,包含propssetuptemplate三个部分。其中,props定义了组件的属性,setup定义了组件的逻辑,template定义了组件的模板。

  1. 注册组件

使用createApp函数创建Vue实例,并使用component方法注册组件,示例如下:

import { createApp } from 'vue' import MyComponent from './MyComponent.vue' ​ const app = createApp() ​ app.component('my-component', MyComponent) ​ app.mount('#app')

上面的代码中,使用component方法将MyComponent组件注册为my-component组件,并使用mount方法将Vue实例挂载到DOM节点上。

需要注意的是,使用defineComponent函数创建的组件可以直接在component方法中注册,无需再进行额外的处理。另外,也可以使用defineAsyncComponent函数定义异步组件,以优化应用的加载性能。

vue3 组件传递数据 props

在Vue3中,组件传递数据的方式与Vue2中基本相同,都是通过props属性进行传递。但是Vue3中对props进行了一些优化,使得组件传递数据更加方便和灵活。

下面是一个简单的示例,演示了如何在Vue3中使用props传递数据:

// ChildComponent.vue <template>   <div>     <h2>{{ title }}</h2>     <p>{{ content }}</p>   </div> </template> ​ <script>   import { defineComponent } from 'vue' ​   export default defineComponent({     name: 'ChildComponent',     props: {       title: {         type: String,         required: true       },       content: {         type: String,         default: ''       }     }   }) </script>
// ParentComponent.vue <template>   <div>     <h1>{{ pageTitle }}</h1>     <child-component :title="childTitle" :content="childContent" />   </div> </template> ​ <script>   import { defineComponent } from 'vue'   import ChildComponent from './ChildComponent.vue' ​   export default defineComponent({     name: 'ParentComponent',     components: {       ChildComponent     },     data() {       return {         pageTitle: 'Parent Component',         childTitle: 'Child Component',         childContent: 'Lorem ipsum dolor sit amet'       }     }   }) </script>

在上面的示例中,ChildComponent组件定义了两个propstitlecontenttitle属性是必需的,类型为字符串;content属性是可选的,类型为字符串,如果没有传递则默认为空字符串。

ParentComponent组件中,使用child-component标签引入了ChildComponent组件,并通过:title:content指令将数据传递给子组件。在data中定义了pageTitlechildTitlechildContent三个属性,分别用于在父组件和子组件中显示标题和内容。

需要注意的是,在Vue3中,使用props传递数据时,可以通过.sync修饰符实现双向绑定,也可以使用v-model指令简化双向绑定的写法。此外,还可以使用emit方法向父组件发送事件,实现组件之间的通信。

vue3 组件传递多种数据类型

在Vue3中,组件传递多种数据类型的方式与Vue2中基本相同,都是通过props属性进行传递。下面是一个示例,演示了如何在Vue3中使用props传递多种数据类型:

// ChildComponent.vue <template>   <div>     <h2>{{ title }}</h2>     <p>{{ content }}</p>     <ul>       <li v-for="item in list" :key="item.id">{{ item.name }}</li>     </ul>   </div> </template> ​ <script>   import { defineComponent } from 'vue' ​   export default defineComponent({     name: 'ChildComponent',     props: {       title: {         type: String,         required: true       },       content: {         type: String,         default: ''       },       list: {         type: Array,         default: () => []       }     }   }) </script>

在上面的示例中,ChildComponent组件定义了三个propstitlecontentlisttitle属性是必需的,类型为字符串;content属性是可选的,类型为字符串,如果没有传递则默认为空字符串;list属性是可选的,类型为数组,如果没有传递则默认为空数组。

在父组件中,可以通过:title:content:list指令将数据传递给子组件。需要注意的是,如果要传递数组类型的数据,可以使用v-bind指令或简写的:语法,例如:list="[ { id: 1, name: 'item 1' }, { id: 2, name: 'item 2' } ]"

需要注意的是,在Vue3中,使用props传递数据时,可以通过.sync修饰符实现双向绑定,也可以使用v-model指令简化双向绑定的写法。此外,还可以使用emit方法向父组件发送事件,实现组件之间的通信。

vue3 组件传递props 校验

在Vue3中,组件传递props时,可以使用Props选项进行校验。Props选项是一个对象,用于指定组件接受的props以及其类型、默认值和校验规则等。

下面是一个示例,演示了如何在Vue3中使用Props选项进行校验:

// ChildComponent.vue <template>   <div>     <h2>{{ title }}</h2>     <p>{{ content }}</p>     <ul>       <li v-for="item in list" :key="item.id">{{ item.name }}</li>     </ul>   </div> </template> ​ <script>   import { defineComponent } from 'vue' ​   export default defineComponent({     name: 'ChildComponent',     props: {       // 校验title属性,类型为字符串,必须传递       title: {         type: String,         required: true       },       // 校验content属性,类型为字符串,如果没有传递则默认为空字符串       content: {         type: String,         default: ''       },       // 校验list属性,类型为数组,如果没有传递则默认为空数组       list: {         type: Array,         default: () => []       },       // 校验count属性,类型为数字,必须大于0       count: {         type: Number,         validator: (value) => value > 0       }     }   }) </script>

在上面的示例中,ChildComponent组件定义了四个propstitlecontentlistcount。其中,titlecount属性是必需的,类型分别为字符串和数字;contentlist属性是可选的,类型分别为字符串和数组,如果没有传递则分别默认为空字符串和空数组。此外,count属性还定义了一个校验规则,即必须大于0。

需要注意的是,在Vue3中,如果一个props属性没有指定类型,那么它可以接受任何类型的数据。如果需要限制props属性接受的数据类型,可以使用type选项指定。如果需要指定多个类型,可以使用数组形式,例如type: [String, Number]

此外,如果需要对props属性进行更复杂的校验,可以使用validator选项。validator是一个函数,用于校验props属性的值是否符合指定的规则。如果校验失败,可以返回false或抛出异常,Vue会在控制台输出警告信息。

vue3 组件事件

在Vue3中,组件事件可以使用emits选项进行定义。emits选项是一个数组,用于指定组件可以触发的事件名称。定义组件事件后,可以使用$emit方法在组件内部触发事件,并可以在父组件中使用v-on指令监听事件。

下面是一个示例,演示了如何在Vue3中定义组件事件:

// ChildComponent.vue <template>   <button @click="handleClick">{{ buttonText }}</button> </template>  <script>   import { defineComponent } from 'vue'    export default defineComponent({     name: 'ChildComponent',     emits: ['click'],     props: {       buttonText: {         type: String,         required: true       }     },     methods: {       handleClick() {         this.$emit('click')       }     }   }) </script>

在上面的示例中,ChildComponent组件定义了一个emits选项,指定了可以触发的click事件。在组件内部,使用$emit方法触发click事件,并在父组件中使用v-on指令监听该事件。

下面是父组件如何监听ChildComponent组件触发的click事件:

// ParentComponent.vue <template>   <div>     <ChildComponent :buttonText="buttonText" @click="handleClick" />   </div> </template> ​ <script>   import { defineComponent } from 'vue'   import ChildComponent from './ChildComponent.vue' ​   export default defineComponent({     name: 'ParentComponent',     components: {       ChildComponent     },     data() {       return {         buttonText: 'Click me'       }     },     methods: {       handleClick() {         console.log('ChildComponent clicked')       }     }   }) </script>

在上面的示例中,ParentComponent组件使用v-on指令监听ChildComponent组件触发的click事件,并在handleClick方法中输出一条日志。

需要注意的是,在Vue3中,如果一个组件触发了未定义的事件,Vue会在控制台输出警告信息。如果需要禁用这个警告,可以在createApp方法中传递一个config选项,设置warnHandler属性为null。例如:

import { createApp } from 'vue' ​ const app = createApp({   // ... }) ​ app.config.warnHandler = null ​ app.mount('#app')

vue3 组件事件配合v-model使用

在Vue3中,组件事件可以配合v-model指令使用,用于实现双向数据绑定。要实现v-model指令,需要在组件中定义一个名为modelValue的prop,并在emits选项中指定update:modelValue事件。

以下是一个示例,演示了如何在Vue3中使用v-model指令:

// ChildComponent.vue <template>   <input :value="modelValue" @input="handleInput" /> </template> ​ <script>   import { defineComponent } from 'vue' ​   export default defineComponent({     name: 'ChildComponent',     emits: ['update:modelValue'],     props: {       modelValue: {         type: String,         required: true       }     },     methods: {       handleInput(event) {         this.$emit('update:modelValue', event.target.value)       }     }   }) </script>

在上面的示例中,ChildComponent组件定义了一个名为modelValue的prop,并在emits选项中指定了update:modelValue事件。在组件内部,使用$emit方法触发update:modelValue事件,并传递输入框的值。

下面是父组件如何使用v-model指令绑定ChildComponent组件的modelValue

// ParentComponent.vue <template>   <div>     <ChildComponent v-model="inputValue" />   </div> </template> ​ <script>   import { defineComponent, ref } from 'vue'   import ChildComponent from './ChildComponent.vue' ​   export default defineComponent({     name: 'ParentComponent',     components: {       ChildComponent     },     setup() {       const inputValue = ref('') ​       return {         inputValue       }     }   }) </script>

在上面的示例中,ParentComponent组件使用v-model指令绑定ChildComponent组件的modelValue,并将其赋值给inputValue变量。此时,ChildComponent组件的输入框和inputValue变量会实现双向数据绑定。

需要注意的是,v-model指令实际上是语法糖,相当于同时绑定了一个value prop和一个update:value事件。因此,如果需要在组件内部使用v-model指令,也需要定义一个名为value的prop,并在emits选项中指定update:value事件。

vue3 组件数据传递

在 Vue3 中,组件数据传递可以通过 props 和 emit 实现。

  1. Props

在 Vue3 中,通过 props 定义组件的属性,可以将数据从父组件传递到子组件。父组件中使用子组件时,可以通过 v-bind 或简写的 : 来绑定属性值。

例如,下面的代码演示了如何使用 props 在父组件中向子组件传递数据:

// ChildComponent.vue <template>   <div>{{ message }}</div> </template>  <script>   import { defineComponent, PropType } from 'vue'    export default defineComponent({     name: 'ChildComponent',     props: {       message: {         type: String,         required: true       }     }   }) </script>  // ParentComponent.vue <template>   <div>     <ChildComponent :message="parentMessage" />   </div> </template>  <script>   import { defineComponent } from 'vue'   import ChildComponent from './ChildComponent.vue'    export default defineComponent({     name: 'ParentComponent',     components: {       ChildComponent     },     data() {       return {         parentMessage: 'Hello from parent component'       }     }   }) </script>

在上面的代码中,ChildComponent 组件定义了一个名为 messageprops,并在模板中使用它来显示数据。在 ParentComponent 组件中,使用 v-bind 或简写的 : 来将父组件的 parentMessage 数据传递给子组件的 message 属性。

  1. Emit

在 Vue3 中,通过 emit 发送自定义事件,可以将数据从子组件传递到父组件。子组件使用 $emit 方法触发事件,并传递数据。父组件中通过 v-on 或简写的 @ 来监听事件,并在事件处理函数中获取数据。

例如,下面的代码演示了如何使用 emit 在子组件中向父组件传递数据:

// ChildComponent.vue <template>   <button @click="sendMessage">Send message to parent</button> </template> ​ <script>   import { defineComponent } from 'vue' ​   export default defineComponent({     name: 'ChildComponent',     methods: {       sendMessage() {         this.$emit('message-sent', 'Hello from child component')       }     }   }) </script> ​ // ParentComponent.vue <template>   <div>     <ChildComponent @message-sent="handleMessage" />     <div>{{ message }}</div>   </div> </template> ​ <script>   import { defineComponent, ref } from 'vue'   import ChildComponent from './ChildComponent.vue' ​   export default defineComponent({     name: 'ParentComponent',     components: {       ChildComponent     },     setup() {       const message = ref('') ​       const handleMessage = (data) => {         message.value = data       } ​       return {         message,         handleMessage       }     }   }) </script>

在上面的代码中,ChildComponent 组件定义了一个 sendMessage 方法,在方法中使用 $emit 方法触发 message-sent 事件,并将数据传递给父组件。在 ParentComponent 组件中,使用 v-on 或简写的 @ 来监听 message-sent 事件,并在事件处理函数中获取数据。

vue3 透传Attributes

在 Vue3 中,可以使用 v-bind="$attrs" 透传父组件的 attributes 到子组件,子组件可以通过 inheritAttrs: false 禁用继承父组件的 attributes,然后使用 $attrs 获取透传的 attributes。

例如,下面的代码演示了如何使用 $attrs 透传父组件的 attributes 到子组件:

// ChildComponent.vue <template>   <div :class="computedClass" v-bind="$attrs">{{ message }}</div> </template> ​ <script>   import { defineComponent } from 'vue' ​   export default defineComponent({     name: 'ChildComponent',     inheritAttrs: false,     props: {       message: {         type: String,         required: true       }     },     computed: {       computedClass() {         return {           'text-red': this.$attrs.color === 'red'         }       }     }   }) </script> ​ // ParentComponent.vue <template>   <div>     <ChildComponent message="Hello from parent component" color="red" />   </div> </template> ​ <script>   import { defineComponent } from 'vue'   import ChildComponent from './ChildComponent.vue' ​   export default defineComponent({     name: 'ParentComponent',     components: {       ChildComponent     }   }) </script>

在上面的代码中,ChildComponent 组件使用 v-bind="$attrs" 透传父组件的 attributes,并在 computedClass 计算属性中根据 color 属性的值来动态设置样式。在 ParentComponent 组件中,使用 color 属性来设置文本颜色。