Vue3从入门到精通(二)

vue3 侦听器

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

1. 创建侦听器

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

​

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

2. 侦听多个属性

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

​

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

3. 深度侦听

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

​

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

4. 取消侦听器

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

​

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

vue3 表单输入绑定

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

1. 基本用法

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

​

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

2. 修饰符

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

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

​

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

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

​

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

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

​

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

3. 自定义组件

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

​

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

vue3 模板引用

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

1. 组件引用

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

​

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

2. DOM元素引用

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

​

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

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

vue3 组件组成

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

1. 模板

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

​

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

2. 逻辑

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

​

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

3. 样式

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

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

​

​

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

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

​

​

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

vue3 组件嵌套关系

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

例如，有两个组件Parent和Child，其中Parent组件中嵌套了Child组件。示例如下：

​

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

Child组件的代码如下：

​

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

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

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: `
    

      
{{ title }}
      
{{ content }}
      Click Me
    
  `
})

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

2. 注册组件

使用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

​

// ParentComponent.vue

​

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

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

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

vue3 组件传递多种数据类型

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

// ChildComponent.vue

​

在上面的示例中，ChildComponent组件定义了三个props：title、content和list。title属性是必需的，类型为字符串；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

​

在上面的示例中，ChildComponent组件定义了四个props：title、content、list和count。其中，title和count属性是必需的，类型分别为字符串和数字；content和list属性是可选的，类型分别为字符串和数组，如果没有传递则分别默认为空字符串和空数组。此外，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

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

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

// ParentComponent.vue

​

在上面的示例中，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

​

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

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

// ParentComponent.vue

​

在上面的示例中，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




// ParentComponent.vue

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

2. Emit

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

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

// ChildComponent.vue

​

​
// ParentComponent.vue

​

在上面的代码中，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

​

​
// ParentComponent.vue

​

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