vu e组件封装简单案例

好的，下面是一个简单的 Vue 组件封装案例：

假设我们要封装一个名为 "my-button" 的按钮组件，该组件包含以下功能：

1. 可以自定义按钮文本。
2. 点击按钮时触发一个自定义事件。

首先，我们需要在 Vue 中注册一个全局组件：

Vue.component('my-button', {
  props: ['text'],
  template: `<button @click="$emit('myClick')">{{ text }}</button>`
});

在上述代码中，我们定义了一个名为 "my-button" 的组件，它有一个名为 "text" 的 props 属性，用于接收按钮文本。在组件模板中，我们使用了一个基本的 HTML button 元素，并在点击时触发了一个自定义事件 "myClick"。

接下来，在父组件中使用 "my-button" 组件：

<my-button text="Click me!" @myClick="handleClick"></my-button>

在上述代码中，我们通过 "text" 属性向 "my-button" 组件传递了按钮文本，同时绑定了 "myClick" 事件，并指定了一个名为 "handleClick" 的方法来处理该事件。

最后，我们需要在父组件中定义 "handleClick" 方法：

methods: {
  handleClick() {
    alert('Button clicked!');
  }
}

现在，当我们点击 "my-button" 组件时，就会触发 "handleClick" 方法，并弹出一个提示框。

这就是一个简单的 Vue 组件封装案例。通过组件化的方式，我们可以将复杂的 UI 界面分解成多个独立的组件，并在不同的场景中复用它们。