Vue3从入门到精通(二)

Posted on by hackdl

vue3 侦听器

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

  1. 创建侦听器

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


  
{{ message }}


​

export default {
  data() {
    return {
      message: 'Hello, Vue3!'
    }
  },
  watch: {
    message(newValue, oldValue) {
      console.log(`New value: ${newValue}, old value: ${oldValue}`)
    }
  }
}

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

  1. 侦听多个属性

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


  
{{ fullName }}


​

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

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

  1. 深度侦听

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


  
{{ user.name }}


​

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
    }
  }
}

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

  1. 取消侦听器

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


  
{{ message }}


​

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)
  }
}

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

vue3 表单输入绑定

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

  1. 基本用法

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


  

    
    
{{ message }}

  


​

export default {
  data() {
    return {
      message: ''
    }
  }
}

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

  1. 修饰符

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

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


  

    
    
{{ message }}

  


​

export default {
  data() {
    return {
      message: ''
    }
  }
}

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

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


  

    
    
{{ message }}

  


​

export default {
  data() {
    return {
      message: ''
    }
  }
}

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

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


  

    
    
{{ age }}

  


​

export default {
  data() {
    return {
      age: 0
    }
  }
}

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

  1. 自定义组件

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


  

    
    
{{ message }}

  


​

import MyInput from './MyInput.vue'
​
export default {
  components: {
    MyInput
  },
  data() {
    return {
      message: ''
    }
  }
}

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

vue3 模板引用

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

  1. 组件引用

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


  

    
  


​

import MyComponent from './MyComponent.vue'
​
export default {
  components: {
    MyComponent
  },
  mounted() {
    console.log(this.$refs.myComponent) // 输出组件实例
  }
}

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

  1. DOM元素引用

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


  

    
  


​

export default {
  mounted() {
    console.log(this.$refs.myInput) // 输出DOM元素
  }
}

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

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

vue3 组件组成

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

  1. 模板

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


  

    
{{ title }}

    
{{ content }}

  


​

export default {
  data() {
    return {
      title: 'Hello, Vue3!',
      content: 'Vue3 is awesome!'
    }
  }
}

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

  1. 逻辑

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


  

    
{{ title }}

    
{{ content }}

  


​

export default {
  data() {
    return {
      title: 'Hello, Vue3!',
      content: 'Vue3 is awesome!'
    }
  },
  methods: {
    handleClick() {
      console.log('clicked')
    }
  }
}

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

  1. 样式

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

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


  

    
{{ title }}

    
{{ content }}

  


​

export default {
  data() {
    return {
      title: 'Hello, Vue3!',
      content: 'Vue3 is awesome!'
    }
  }
}

​

.wrapper {
  padding: 20px;
  background-color: #f5f5f5;
}
​
.title {
  font-size: 24px;
  color: var(--primary-color);
}
​
.content {
  font-size: 16px;
  color: #333;
}

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

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


  

    
{{ title }}

    
{{ content }}

  


​

export default {
  data() {
    return {
      title: 'Hello, Vue3!',
      content: 'Vue3 is awesome!'
    }
  }
}

​

.wrapper {
  padding: 20px;
  background-color: #f5f5f5;
}
​
.title {
  font-size: 24px;
  color: var(--primary-color);
}
​
.content {
  font-size: 16px;
  color: #333;
}

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

vue3 组件嵌套关系

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

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


  

    
{{ title }}

    
  


​

import Child from './Child.vue'
​
export default {
  components: {
    Child
  },
  data() {
    return {
      title: 'Parent Component',
      content: 'This is the content of Parent Component.'
    }
  }
}

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

Child组件的代码如下：


  

    
{{ title }}

    
{{ content }}

  


​

export default {
  props: {
    content: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      title: 'Child Component'
    }
  }
}

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

      
    

  `
})

上面的代码中，使用defineComponent函数定义了一个名为MyComponent的组件，包含props、setup和template三个部分。其中，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

  

    
{{ title }}

    
{{ content }}

  


​

  import { defineComponent } from 'vue'
​
  export default defineComponent({
    name: 'ChildComponent',
    props: {
      title: {
        type: String,
        required: true
      },
      content: {
        type: String,
        default: ''
      }
    }
  })

// ParentComponent.vue

  

    
{{ pageTitle }}

    
  


​

  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'
      }
    }
  })

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

  

    
{{ title }}

    
{{ content }}

    
    
      
  • {{ item.name }}
    • 
    

  


​

  import { defineComponent } from 'vue'
​
  export default defineComponent({
    name: 'ChildComponent',
    props: {
      title: {
        type: String,
        required: true
      },
      content: {
        type: String,
        default: ''
      },
      list: {
        type: Array,
        default: () => []
      }
    }
  })

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

  

    
{{ title }}

    
{{ content }}

    
    
      
  • {{ item.name }}
    • 
    

  


​

  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
      }
    }
  })

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

  



  import { defineComponent } from 'vue'

  export default defineComponent({
    name: 'ChildComponent',
    emits: ['click'],
    props: {
      buttonText: {
        type: String,
        required: true
      }
    },
    methods: {
      handleClick() {
        this.$emit('click')
      }
    }
  })

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

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

// ParentComponent.vue

  

    
  


​

  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')
      }
    }
  })

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

  

​

  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)
      }
    }
  })

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

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

// ParentComponent.vue

  

    
  


​

  import { defineComponent, ref } from 'vue'
  import ChildComponent from './ChildComponent.vue'
​
  export default defineComponent({
    name: 'ParentComponent',
    components: {
      ChildComponent
    },
    setup() {
      const inputValue = ref('')
​
      return {
        inputValue
      }
    }
  })

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

  
{{ message }}




  import { defineComponent, PropType } from 'vue'

  export default defineComponent({
    name: 'ChildComponent',
    props: {
      message: {
        type: String,
        required: true
      }
    }
  })


// ParentComponent.vue

  

    
  




  import { defineComponent } from 'vue'
  import ChildComponent from './ChildComponent.vue'

  export default defineComponent({
    name: 'ParentComponent',
    components: {
      ChildComponent
    },
    data() {
      return {
        parentMessage: 'Hello from parent component'
      }
    }
  })

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

  1. Emit

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

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

// ChildComponent.vue

  

​

  import { defineComponent } from 'vue'
​
  export default defineComponent({
    name: 'ChildComponent',
    methods: {
      sendMessage() {
        this.$emit('message-sent', 'Hello from child component')
      }
    }
  })

​
// ParentComponent.vue

  

    
    
{{ message }}

  


​

  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
      }
    }
  })

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

  
{{ message }}


​

  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'
        }
      }
    }
  })

​
// ParentComponent.vue

  

    
  


​

  import { defineComponent } from 'vue'
  import ChildComponent from './ChildComponent.vue'
​
  export default defineComponent({
    name: 'ParentComponent',
    components: {
      ChildComponent
    }
  })

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

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.fwqtg.net

相关推荐: PowerShell系列（一）：PowerShell介绍和cmd命令行的区别

什么是Windows系统的命令行环境，之前我们在使用XP、Win7系统的时候，用的最多的就是微软官方自带的cmd命令窗口了，我们通过敲命令行窗口可以实现和操作系统之间的交互。当然随着微软技术的快速发展，到了目前比较流行的Win10操作系统，默认采用的就是Pow…

服务器托管，北京服务器托管，服务器租用，机房机柜带宽租用

服务器托管

咨询：董先生

电话13051898268 QQ/微信93663045！

上一篇:
下一篇: