vue封装自定义组件例子

以下是一个简单的Vue自定义组件示例：

<template>
  <div class="my-component">
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
    <button @click="onClick">Click me!</button>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    title: String,
    content: String
  },
  methods: {
    onClick() {
      alert('You clicked me!');
    }
  }
};
</script>

<style scoped>
.my-component {
  border: 1px solid black;
  padding: 10px;
}
</style>

在上面的代码中，我们定义了一个名为`MyComponent`的Vue组件。它具有两个带有字符串类型的props：`title`和`content`。组件还具有一个`onClick`方法，当用户单击组件中的按钮时将触发该方法。最后，组件还具有一个样式规则，它定义了组件的边框和填充。

要在Vue应用程序中使用此组件，您可以像这样包含它：

<template>
  <div>
    <my-component title="Hello World" content="This is my custom component!"></my-component>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  name: 'App',
  components: {
    MyComponent
  }
};
</script>

在上面的代码中，我们在应用程序中包含了`MyComponent`，并将其作为一个子组件呈现。我们还将`MyComponent`作为一个组件导入，并将其添加到`components`对象中，以便Vue可以使用它。最后，我们传递了一些props值，用于设置组件的标题和内容。