经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
Vue3从入门到精通(二)
来源:cnblogs  作者:明志德道  时间:2023/6/9 8:43:35  对本文有异议

vue3 侦听器

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

  1. 创建侦听器

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

  1. <template>
  2. <div>{{ message }}</div>
  3. </template>
  4. ?
  5. <script>
  6. export default {
  7. data() {
  8. return {
  9. message: 'Hello, Vue3!'
  10. }
  11. },
  12. watch: {
  13. message(newValue, oldValue) {
  14. console.log(`New value: ${newValue}, old value: ${oldValue}`)
  15. }
  16. }
  17. }
  18. </script>

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

  1. 侦听多个属性

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

  1. <template>
  2. <div>{{ fullName }}</div>
  3. </template>
  4. ?
  5. <script>
  6. export default {
  7. data() {
  8. return {
  9. firstName: 'John',
  10. lastName: 'Doe'
  11. }
  12. },
  13. watch: {
  14. ['firstName', 'lastName'](newValues, oldValues) {
  15. console.log(`New values: ${newValues}, old values: ${oldValues}`)
  16. }
  17. },
  18. computed: {
  19. fullName() {
  20. return `${this.firstName} ${this.lastName}`
  21. }
  22. }
  23. }
  24. </script>

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

  1. 深度侦听

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

  1. <template>
  2. <div>{{ user.name }}</div>
  3. </template>
  4. ?
  5. <script>
  6. export default {
  7. data() {
  8. return {
  9. user: {
  10. name: 'John Doe',
  11. age: 30
  12. }
  13. }
  14. },
  15. watch: {
  16. user: {
  17. handler(newValue, oldValue) {
  18. console.log(`New value: ${JSON.stringify(newValue)}, old value: ${JSON.stringify(oldValue)}`)
  19. },
  20. deep: true
  21. }
  22. }
  23. }
  24. </script>

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

  1. 取消侦听器

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

  1. <template>
  2. <div>{{ message }}</div>
  3. </template>
  4. ?
  5. <script>
  6. export default {
  7. data() {
  8. return {
  9. message: 'Hello, Vue3!'
  10. }
  11. },
  12. mounted() {
  13. const unwatch = this.$watch('message', (newValue, oldValue) => {
  14. console.log(`New value: ${newValue}, old value: ${oldValue}`)
  15. })
  16. ?
  17. setTimeout(() => {
  18. unwatch()
  19. }, 5000)
  20. }
  21. }
  22. </script>

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

vue3 表单输入绑定

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

  1. 基本用法

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

  1. <template>
  2. <div>
  3. <input type="text" v-model="message">
  4. <p>{{ message }}</p>
  5. </div>
  6. </template>
  7. ?
  8. <script>
  9. export default {
  10. data() {
  11. return {
  12. message: ''
  13. }
  14. }
  15. }
  16. </script>

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

  1. 修饰符

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

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

  1. <template>
  2. <div>
  3. <input type="text" v-model.lazy="message">
  4. <p>{{ message }}</p>
  5. </div>
  6. </template>
  7. ?
  8. <script>
  9. export default {
  10. data() {
  11. return {
  12. message: ''
  13. }
  14. }
  15. }
  16. </script>

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

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

  1. <template>
  2. <div>
  3. <input type="text" v-model.trim="message">
  4. <p>{{ message }}</p>
  5. </div>
  6. </template>
  7. ?
  8. <script>
  9. export default {
  10. data() {
  11. return {
  12. message: ''
  13. }
  14. }
  15. }
  16. </script>

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

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

  1. <template>
  2. <div>
  3. <input type="text" v-model.number="age">
  4. <p>{{ age }}</p>
  5. </div>
  6. </template>
  7. ?
  8. <script>
  9. export default {
  10. data() {
  11. return {
  12. age: 0
  13. }
  14. }
  15. }
  16. </script>

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

  1. 自定义组件

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

  1. <template>
  2. <div>
  3. <my-input v-model="message"></my-input>
  4. <p>{{ message }}</p>
  5. </div>
  6. </template>
  7. ?
  8. <script>
  9. import MyInput from './MyInput.vue'
  10. ?
  11. export default {
  12. components: {
  13. MyInput
  14. },
  15. data() {
  16. return {
  17. message: ''
  18. }
  19. }
  20. }
  21. </script>

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

vue3 模板引用

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

  1. 组件引用

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

  1. <template>
  2. <div>
  3. <my-component ref="myComponent"></my-component>
  4. </div>
  5. </template>
  6. ?
  7. <script>
  8. import MyComponent from './MyComponent.vue'
  9. ?
  10. export default {
  11. components: {
  12. MyComponent
  13. },
  14. mounted() {
  15. console.log(this.$refs.myComponent) // 输出组件实例
  16. }
  17. }
  18. </script>

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

  1. DOM元素引用

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

  1. <template>
  2. <div>
  3. <input type="text" ref="myInput">
  4. </div>
  5. </template>
  6. ?
  7. <script>
  8. export default {
  9. mounted() {
  10. console.log(this.$refs.myInput) // 输出DOM元素
  11. }
  12. }
  13. </script>

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

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

vue3 组件组成

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

  1. 模板

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

  1. <template>
  2. <div>
  3. <h1>{{ title }}</h1>
  4. <p>{{ content }}</p>
  5. </div>
  6. </template>
  7. ?
  8. <script>
  9. export default {
  10. data() {
  11. return {
  12. title: 'Hello, Vue3!',
  13. content: 'Vue3 is awesome!'
  14. }
  15. }
  16. }
  17. </script>

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

  1. 逻辑

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

  1. <template>
  2. <div>
  3. <h1>{{ title }}</h1>
  4. <p>{{ content }}</p>
  5. </div>
  6. </template>
  7. ?
  8. <script>
  9. export default {
  10. data() {
  11. return {
  12. title: 'Hello, Vue3!',
  13. content: 'Vue3 is awesome!'
  14. }
  15. },
  16. methods: {
  17. handleClick() {
  18. console.log('clicked')
  19. }
  20. }
  21. }
  22. </script>

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

  1. 样式

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

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

  1. <template>
  2. <div class="wrapper">
  3. <h1 class="title">{{ title }}</h1>
  4. <p class="content">{{ content }}</p>
  5. </div>
  6. </template>
  7. ?
  8. <script>
  9. export default {
  10. data() {
  11. return {
  12. title: 'Hello, Vue3!',
  13. content: 'Vue3 is awesome!'
  14. }
  15. }
  16. }
  17. </script>
  18. ?
  19. <style module>
  20. .wrapper {
  21. padding: 20px;
  22. background-color: #f5f5f5;
  23. }
  24. ?
  25. .title {
  26. font-size: 24px;
  27. color: var(--primary-color);
  28. }
  29. ?
  30. .content {
  31. font-size: 16px;
  32. color: #333;
  33. }
  34. </style>

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

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

  1. <template>
  2. <div :class="$style.wrapper">
  3. <h1 :class="$style.title">{{ title }}</h1>
  4. <p :class="$style.content">{{ content }}</p>
  5. </div>
  6. </template>
  7. ?
  8. <script>
  9. export default {
  10. data() {
  11. return {
  12. title: 'Hello, Vue3!',
  13. content: 'Vue3 is awesome!'
  14. }
  15. }
  16. }
  17. </script>
  18. ?
  19. <style module>
  20. .wrapper {
  21. padding: 20px;
  22. background-color: #f5f5f5;
  23. }
  24. ?
  25. .title {
  26. font-size: 24px;
  27. color: var(--primary-color);
  28. }
  29. ?
  30. .content {
  31. font-size: 16px;
  32. color: #333;
  33. }
  34. </style>

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

vue3 组件嵌套关系

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

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

  1. <template>
  2. <div>
  3. <h1>{{ title }}</h1>
  4. <child :content="content"></child>
  5. </div>
  6. </template>
  7. ?
  8. <script>
  9. import Child from './Child.vue'
  10. ?
  11. export default {
  12. components: {
  13. Child
  14. },
  15. data() {
  16. return {
  17. title: 'Parent Component',
  18. content: 'This is the content of Parent Component.'
  19. }
  20. }
  21. }
  22. </script>

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

Child组件的代码如下:

  1. <template>
  2. <div>
  3. <h2>{{ title }}</h2>
  4. <p>{{ content }}</p>
  5. </div>
  6. </template>
  7. ?
  8. <script>
  9. export default {
  10. props: {
  11. content: {
  12. type: String,
  13. default: ''
  14. }
  15. },
  16. data() {
  17. return {
  18. title: 'Child Component'
  19. }
  20. }
  21. }
  22. </script>

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

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

vue3 组件注册方式

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

  1. 创建组件

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

  1. import { defineComponent } from 'vue'
  2. ?
  3. export default defineComponent({
  4. name: 'MyComponent',
  5. props: {
  6. content: {
  7. type: String,
  8. default: ''
  9. }
  10. },
  11. setup(props) {
  12. return {
  13. title: 'My Component',
  14. handleClick() {
  15. console.log('clicked')
  16. }
  17. }
  18. },
  19. template: `
  20. <div>
  21. <h1>{{ title }}</h1>
  22. <p>{{ content }}</p>
  23. <button @click="handleClick">Click Me</button>
  24. </div>
  25. `
  26. })

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

  1. 注册组件

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

  1. import { createApp } from 'vue'
  2. import MyComponent from './MyComponent.vue'
  3. ?
  4. const app = createApp()
  5. ?
  6. app.component('my-component', MyComponent)
  7. ?
  8. app.mount('#app')

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

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

vue3 组件传递数据 props

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

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

  1. // ChildComponent.vue
  2. <template>
  3. <div>
  4. <h2>{{ title }}</h2>
  5. <p>{{ content }}</p>
  6. </div>
  7. </template>
  8. ?
  9. <script>
  10. import { defineComponent } from 'vue'
  11. ?
  12. export default defineComponent({
  13. name: 'ChildComponent',
  14. props: {
  15. title: {
  16. type: String,
  17. required: true
  18. },
  19. content: {
  20. type: String,
  21. default: ''
  22. }
  23. }
  24. })
  25. </script>
  1. // ParentComponent.vue
  2. <template>
  3. <div>
  4. <h1>{{ pageTitle }}</h1>
  5. <child-component :title="childTitle" :content="childContent" />
  6. </div>
  7. </template>
  8. ?
  9. <script>
  10. import { defineComponent } from 'vue'
  11. import ChildComponent from './ChildComponent.vue'
  12. ?
  13. export default defineComponent({
  14. name: 'ParentComponent',
  15. components: {
  16. ChildComponent
  17. },
  18. data() {
  19. return {
  20. pageTitle: 'Parent Component',
  21. childTitle: 'Child Component',
  22. childContent: 'Lorem ipsum dolor sit amet'
  23. }
  24. }
  25. })
  26. </script>

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

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

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

vue3 组件传递多种数据类型

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

  1. // ChildComponent.vue
  2. <template>
  3. <div>
  4. <h2>{{ title }}</h2>
  5. <p>{{ content }}</p>
  6. <ul>
  7. <li v-for="item in list" :key="item.id">{{ item.name }}</li>
  8. </ul>
  9. </div>
  10. </template>
  11. ?
  12. <script>
  13. import { defineComponent } from 'vue'
  14. ?
  15. export default defineComponent({
  16. name: 'ChildComponent',
  17. props: {
  18. title: {
  19. type: String,
  20. required: true
  21. },
  22. content: {
  23. type: String,
  24. default: ''
  25. },
  26. list: {
  27. type: Array,
  28. default: () => []
  29. }
  30. }
  31. })
  32. </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选项进行校验:

  1. // ChildComponent.vue
  2. <template>
  3. <div>
  4. <h2>{{ title }}</h2>
  5. <p>{{ content }}</p>
  6. <ul>
  7. <li v-for="item in list" :key="item.id">{{ item.name }}</li>
  8. </ul>
  9. </div>
  10. </template>
  11. ?
  12. <script>
  13. import { defineComponent } from 'vue'
  14. ?
  15. export default defineComponent({
  16. name: 'ChildComponent',
  17. props: {
  18. // 校验title属性,类型为字符串,必须传递
  19. title: {
  20. type: String,
  21. required: true
  22. },
  23. // 校验content属性,类型为字符串,如果没有传递则默认为空字符串
  24. content: {
  25. type: String,
  26. default: ''
  27. },
  28. // 校验list属性,类型为数组,如果没有传递则默认为空数组
  29. list: {
  30. type: Array,
  31. default: () => []
  32. },
  33. // 校验count属性,类型为数字,必须大于0
  34. count: {
  35. type: Number,
  36. validator: (value) => value > 0
  37. }
  38. }
  39. })
  40. </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中定义组件事件:

  1. // ChildComponent.vue
  2. <template>
  3. <button @click="handleClick">{{ buttonText }}</button>
  4. </template>
  5. <script>
  6. import { defineComponent } from 'vue'
  7. export default defineComponent({
  8. name: 'ChildComponent',
  9. emits: ['click'],
  10. props: {
  11. buttonText: {
  12. type: String,
  13. required: true
  14. }
  15. },
  16. methods: {
  17. handleClick() {
  18. this.$emit('click')
  19. }
  20. }
  21. })
  22. </script>

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

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

  1. // ParentComponent.vue
  2. <template>
  3. <div>
  4. <ChildComponent :buttonText="buttonText" @click="handleClick" />
  5. </div>
  6. </template>
  7. ?
  8. <script>
  9. import { defineComponent } from 'vue'
  10. import ChildComponent from './ChildComponent.vue'
  11. ?
  12. export default defineComponent({
  13. name: 'ParentComponent',
  14. components: {
  15. ChildComponent
  16. },
  17. data() {
  18. return {
  19. buttonText: 'Click me'
  20. }
  21. },
  22. methods: {
  23. handleClick() {
  24. console.log('ChildComponent clicked')
  25. }
  26. }
  27. })
  28. </script>

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

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

  1. import { createApp } from 'vue'
  2. ?
  3. const app = createApp({
  4. // ...
  5. })
  6. ?
  7. app.config.warnHandler = null
  8. ?
  9. app.mount('#app')

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

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

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

  1. // ChildComponent.vue
  2. <template>
  3. <input :value="modelValue" @input="handleInput" />
  4. </template>
  5. ?
  6. <script>
  7. import { defineComponent } from 'vue'
  8. ?
  9. export default defineComponent({
  10. name: 'ChildComponent',
  11. emits: ['update:modelValue'],
  12. props: {
  13. modelValue: {
  14. type: String,
  15. required: true
  16. }
  17. },
  18. methods: {
  19. handleInput(event) {
  20. this.$emit('update:modelValue', event.target.value)
  21. }
  22. }
  23. })
  24. </script>

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

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

  1. // ParentComponent.vue
  2. <template>
  3. <div>
  4. <ChildComponent v-model="inputValue" />
  5. </div>
  6. </template>
  7. ?
  8. <script>
  9. import { defineComponent, ref } from 'vue'
  10. import ChildComponent from './ChildComponent.vue'
  11. ?
  12. export default defineComponent({
  13. name: 'ParentComponent',
  14. components: {
  15. ChildComponent
  16. },
  17. setup() {
  18. const inputValue = ref('')
  19. ?
  20. return {
  21. inputValue
  22. }
  23. }
  24. })
  25. </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 在父组件中向子组件传递数据:

  1. // ChildComponent.vue
  2. <template>
  3. <div>{{ message }}</div>
  4. </template>
  5. <script>
  6. import { defineComponent, PropType } from 'vue'
  7. export default defineComponent({
  8. name: 'ChildComponent',
  9. props: {
  10. message: {
  11. type: String,
  12. required: true
  13. }
  14. }
  15. })
  16. </script>
  17. // ParentComponent.vue
  18. <template>
  19. <div>
  20. <ChildComponent :message="parentMessage" />
  21. </div>
  22. </template>
  23. <script>
  24. import { defineComponent } from 'vue'
  25. import ChildComponent from './ChildComponent.vue'
  26. export default defineComponent({
  27. name: 'ParentComponent',
  28. components: {
  29. ChildComponent
  30. },
  31. data() {
  32. return {
  33. parentMessage: 'Hello from parent component'
  34. }
  35. }
  36. })
  37. </script>

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

  1. Emit

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

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

  1. // ChildComponent.vue
  2. <template>
  3. <button @click="sendMessage">Send message to parent</button>
  4. </template>
  5. ?
  6. <script>
  7. import { defineComponent } from 'vue'
  8. ?
  9. export default defineComponent({
  10. name: 'ChildComponent',
  11. methods: {
  12. sendMessage() {
  13. this.$emit('message-sent', 'Hello from child component')
  14. }
  15. }
  16. })
  17. </script>
  18. ?
  19. // ParentComponent.vue
  20. <template>
  21. <div>
  22. <ChildComponent @message-sent="handleMessage" />
  23. <div>{{ message }}</div>
  24. </div>
  25. </template>
  26. ?
  27. <script>
  28. import { defineComponent, ref } from 'vue'
  29. import ChildComponent from './ChildComponent.vue'
  30. ?
  31. export default defineComponent({
  32. name: 'ParentComponent',
  33. components: {
  34. ChildComponent
  35. },
  36. setup() {
  37. const message = ref('')
  38. ?
  39. const handleMessage = (data) => {
  40. message.value = data
  41. }
  42. ?
  43. return {
  44. message,
  45. handleMessage
  46. }
  47. }
  48. })
  49. </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 到子组件:

  1. // ChildComponent.vue
  2. <template>
  3. <div :class="computedClass" v-bind="$attrs">{{ message }}</div>
  4. </template>
  5. ?
  6. <script>
  7. import { defineComponent } from 'vue'
  8. ?
  9. export default defineComponent({
  10. name: 'ChildComponent',
  11. inheritAttrs: false,
  12. props: {
  13. message: {
  14. type: String,
  15. required: true
  16. }
  17. },
  18. computed: {
  19. computedClass() {
  20. return {
  21. 'text-red': this.$attrs.color === 'red'
  22. }
  23. }
  24. }
  25. })
  26. </script>
  27. ?
  28. // ParentComponent.vue
  29. <template>
  30. <div>
  31. <ChildComponent message="Hello from parent component" color="red" />
  32. </div>
  33. </template>
  34. ?
  35. <script>
  36. import { defineComponent } from 'vue'
  37. import ChildComponent from './ChildComponent.vue'
  38. ?
  39. export default defineComponent({
  40. name: 'ParentComponent',
  41. components: {
  42. ChildComponent
  43. }
  44. })
  45. </script>

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

原文链接:https://www.cnblogs.com/for-easy-fast/p/17465813.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号