vue组件封装

// Vue 组件封装示例

// 1. 创建一个简单的 Vue 组件
Vue.component('my-component', {
  // 模板定义
  template: `
    <div class="my-component">
      <h2>{{ title }}</h2>
      <p>{{ message }}</p>
      <button @click="incrementCounter">点击次数: {{ counter }}</button>
    </div>
  `,
  // 数据定义
  data() {
    return {
      title: '这是一个自定义组件',
      message: '这是组件内的内容',
      counter: 0
    };
  },
  // 方法定义
  methods: {
    incrementCounter() {
      this.counter++;
    }
  }
});

// 2. 使用该组件
new Vue({
  el: '#app'
});

解释说明：

1. 组件注册：使用 Vue.component 注册了一个名为 my-component 的全局组件。这样可以在任何地方通过 <my-component></my-component> 来使用这个组件。

2. 模板 (template)：定义了组件的 HTML 结构，包含了一个标题、一段文本和一个按钮。按钮绑定了点击事件，用于增加计数器的值。

3. 数据 (data)：data 函数返回一个对象，包含了组件的状态（如 title, message, counter）。这些状态可以在模板中通过双大括号语法 ({{ }}) 进行绑定。

4. 方法 (methods)：定义了组件的方法，incrementCounter 方法会在按钮被点击时调用，用于增加 counter 的值。

5. 实例化 Vue：最后通过 new Vue 实例化一个 Vue 应用，并挂载到页面中的 #app 元素上，这样就可以在页面中使用我们定义的组件了。

如果需要更复杂的组件封装（如 props、slots 等），可以根据需求进一步扩展。