Vue3 自定义组件，setup 详细写法，组件名称怎么指定，组件属性怎么设置

在 Vue 3 中，使用 setup 函数创建自定义组件，可以通过返回的属性和方法将数据暴露给模板。下面是一个示例，展示了如何在 Vue 3 中使用 setup 函数创建自定义组件，并设置组件名称和属性：

<template>
  <div>
    <p>{ {message } }</p>
    <button @click="reverseMessage">Reverse Message</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  // 设置组件名称
  name: 'MyComponent',

  // 在 setup 函数中创建组件
  setup(props) {
    // 初始化数据
    const message = ref('Hello, world!');

    // 定义方法
    function reverseMessage() {
      message.value = message.value.split('').reverse().join('');
    }

    // 返回要在模板中使用的数据和方法
    return {
      message,
      reverseMessage
    };
  }
};
</script>

在这个示例中：

• 我们通过在组件对象中添加 name 属性来设置组件名称为 'MyComponent'。

• 使用 setup 函数来创建组件。setup 函数的第一个参数是 props，用于接收父组件传递的属性。在这个示例中，我们没有使用 props 参数。

• 我们使用 ref 创建了一个名为 message 的响应式数据，并初始化为 'Hello, world!'。

• 定义了一个名为 reverseMessage 的函数，用于反转 message 的字符串。

• 最后，在 setup 函数中返回了 message 和 reverseMessage，以便在模板中使用。

要设置组件属性，你可以在组件标签上使用属性来传递数据。例如：

<template>
  <div>
    <p>{ { message } }</p>
    <button @click="reverseMessage">Reverse Message</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'MyComponent',
  props: {
    // 定义组件属性
    propValue: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const message = ref(props.propValue);

    function reverseMessage() {
      message.value = message.value.split('').reverse().join('');
    }

    return {
      message,
      reverseMessage
    };
  }
};
</script>

在这个示例中，我们定义了一个名为 propValue 的组件属性，并指定它的类型为字符串，并且设置为必需的。然后，在 setup 函数中，我们使用 props.propValue 初始化了 message 的值。在使用组件时，你可以像这样传递属性：

<MyComponent propValue="Hello, world!" />

这样，propValue 的值就会被传递给自定义组件，并在组件内部使用。