vue3如何定义一个组件

在 Vue 3 中，定义一个可以接收参数的组件通常是通过在组件的 props 选项中定义这些参数来完成的。当你使用组件时，你可以通过传递属性值来设置这些参数。

 

以下是定义可以接收参数的组件的步骤：

 

使用 <script> 而不是 <script setup>

vue

复制

<template>

  <div>

    <h1>{{ message }}</h1>

    <!-- 假设你有一个需要传入的 prop，名为 "propName" -->

    <p>{{ propName }}</p>

  </div>

</template>

 

<script>

export default {

  props: {

    // 定义 propName 属性

    // 这里可以设置它的类型、默认值、验证等

    propName: {

      type: String, // 指定 prop 的类型

      required: true, // 指定 prop 是否为必填项

      default: 'default value' // 指定 prop 的默认值

    },

    // 你可以继续定义其他 prop

  },

  data() {

    return {

      message: 'Hello, Vue 3 Component!'

    }

  }

}

</script>

 

使用 <script setup> 语法糖

 

当使用 <script setup> 语法糖时，你不能直接在 <script> 标签内使用 props 选项。但是，你可以使用 defineProps 宏来声明 props，这是 Vue 3 的 <script setup> 编译时特性之一。

 

vue

复制

<template>

  <div>

    <h1>{{ message }}</h1>

    <p>{{ propName }}</p>

  </div>

</template>

 

<script setup>

import { ref, defineProps } from 'vue'

 

// 使用 defineProps 来声明 prop

const props = defineProps({

  propName: {

    type: String,

    required: true,

    default: 'default value'

  }

})

 

// 其他组件逻辑...

const message = ref('Hello, Vue 3 Component with <script setup>!')

</script>

 

在父组件中使用子组件并传递参数

 

在父组件中，你可以像下面这样使用子组件并传递参数：

 

vue

复制

<template>

  <div>

    <ChildComponent :propName="parentMessage" />

  </div>

</template>

 

<script>

import ChildComponent from './ChildComponent.vue' // 引入子组件

 

export default {

  components: {

    ChildComponent // 注册子组件

  },

  data() {

    return {

      parentMessage: 'This is a message from parent'

    }

  }

}

</script>

 

 

注意在子组件的 <template> 中，你使用 {{ propName }} 来显示传递进来的参数值。在父组件中，你使用 :propName="parentMessage" 来将 parentMessage 数据的值绑定到子组件的 propName prop 上。这里的冒号（:）是 Vue 的语法糖，用于表示这是一个动态绑定，而不是一个静态字符串。