526互联

ue全家桶进阶之路30：Vue定义组件

发布时间 2023-04-17 15:39:00作者: 城南城南

要定义 Vue 3 组件，你可以使用 Vue 3 提供的 defineComponent 函数。

例如，以下是一个简单的 Vue 3 组件定义：

import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MyComponent',
  props: {
    message: String
  },
  setup(props) {
    return {
      // 这里返回组件的数据和方法
      showMessage() {
        alert(props.message);
      }
    }
  },
  template: `
    <div>
      <p>{{ message }}</p>
      <button @click="showMessage">显示消息</button>
    </div>
  `
});

在这个例子中，我们使用 defineComponent 函数来定义一个名为 MyComponent 的组件。它有一个 message 属性，用来显示一条消息。setup 函数中返回了一个 showMessage 方法，用来弹出一个包含 message 属性值的提示框。最后，我们在组件的 template 中使用了 message 和 showMessage。

当你定义完组件后，你可以在其他地方引入和使用它：

import MyComponent from './MyComponent.vue';

const app = createApp();

app.component('my-component', MyComponent);

app.mount('#app');