详解vue cli中如何使用自定义的组件

<!-- MyButton.vue -->
<template>
  <button @click="handleClick">
    <slot></slot>
  </button>
</template>
 
<script>
export default {
  methods: {
    handleClick() {
      this.$emit('clicked'); // 触发 clicked 事件
    }
  }
}
</script>
 
<style scoped>
button {
  /* 按钮样式 */
}
</style>

<!-- 在需要使用的页面或组件中 -->
<template>
  <div>
    <MyButton @clicked="handleButtonClicked">点击这个按钮</MyButton>
  </div>
</template>
 
<script>
import MyButton from '@/components/MyButton.vue'; // 导入自定义组件
 
export default {
  components: {
    MyButton // 注册自定义组件
  },
  methods: {
    handleButtonClicked() {
      // 处理按钮点击事件
    }
  }
}
</script>

// main.js 或 App.vue
import Vue from 'vue';
import MyButton from '@/components/MyButton.vue';
 
Vue.component('MyButton', MyButton); // 全局注册组件
 
new Vue({
  // ...其他配置
}).$mount('#app');

<!-- MyButton.vue -->
<template>
  <button @click="handleClick">
    {{ buttonText }}
  </button>
</template>
 
<script>
export default {
  props: {
    buttonText: String // 定义名为 buttonText 的 prop，类型为字符串
  },
  methods: {
    handleClick() {
      this.$emit('clicked');
    }
  }
}
</script>