vue 自定义组件

<template>
  <div class="custom-component">
    <!-- 插槽内容，可以被父组件传入的内容 -->
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'CustomComponent',
  props: {
    // 定义一个 prop，父组件可以通过传递这个属性来给子组件传递数据
    message: {
      type: String,
      default: '默认消息'
    }
  },
  data() {
    return {
      // 组件内部的状态
      internalState: '这是组件的内部状态'
    };
  },
  methods: {
    // 自定义方法
    greet() {
      console.log(`你好, ${this.message}`);
    }
  }
};
</script>

<style scoped>
/* scoped 表示这些样式只对当前组件生效 */
.custom-component {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px;
}
</style>

解释说明：

• 模板部分 (<template>)：定义了组件的 HTML 结构。这里使用了一个 <slot> 标签，允许父组件向该组件传递内容。
• 脚本部分 (<script>)：定义了组件的行为和逻辑。
  • props：定义了可以从父组件传递给子组件的属性。这里定义了一个名为 message 的属性，默认值为 '默认消息'。
  • data()：返回组件的本地状态对象，这里定义了一个 internalState 变量。
  • methods：定义了组件的方法，如 greet 方法，它会在控制台打印一条消息。
• 样式部分 (<style scoped>)：定义了组件的样式，并且通过 scoped 属性确保这些样式只对该组件生效。

如果需要在父组件中使用这个自定义组件，可以这样做：

<template>
  <div>
    <CustomComponent message="来自父组件的消息">
      <p>这是插槽内容。</p>
    </CustomComponent>
  </div>
</template>

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

export default {
  components: {
    CustomComponent
  }
};
</script>