vue封装组件

// Vue封装组件示例

// 1. 创建一个简单的Vue组件：按钮组件
<template>
  <button @click="handleClick">{{ text }}</button>
</template>

<script>
export default {
  name: 'CustomButton',
  props: {
    text: {
      type: String,
      required: true
    }
  },
  methods: {
    handleClick() {
      this.$emit('click');
    }
  }
};
</script>

<style scoped>
button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}
</style>

// 2. 使用该组件
<template>
  <div>
    <custom-button text="点击我" @click="onButtonClick"></custom-button>
  </div>
</template>

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

export default {
  components: {
    CustomButton
  },
  methods: {
    onButtonClick() {
      alert('按钮被点击了！');
    }
  }
};
</script>

解释说明：

1. 创建组件：

   • 使用 <template> 定义组件的 HTML 结构。
   • 使用 <script> 定义组件的逻辑，包括 props 和 methods。
   • 使用 <style scoped> 定义组件的样式，并且 scoped 确保样式只应用于当前组件。

2. Props：

   • props 是父组件传递给子组件的数据。在这个例子中，text 是从父组件传递给子组件的文本内容。

3. 事件处理：

   • handleClick 方法用于处理按钮点击事件，并通过 $emit 触发自定义事件 click，通知父组件按钮被点击了。

4. 使用组件：

   • 在父组件中引入并注册子组件 CustomButton。
   • 通过 v-on 监听子组件触发的 click 事件，并在父组件中定义相应的处理函数 onButtonClick。

5. 样式：

   • 组件内的样式使用 scoped 属性，确保样式仅作用于当前组件，避免影响其他组件。

希望这个示例能帮助你理解如何在 Vue 中封装和使用组件。