Vue3从入门到精通(二)

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 属性来设置文本颜色。

posted @ 2023-06-08 11:57  明志德道  阅读(821)  评论(0编辑  收藏  举报