探索Vue如何高效构建可复用组件

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="handleClick">点击我</button>
  </div>
</template>

<script>
export default {
  props: ['message'], // 接收父组件传递的 props
  methods: {
    handleClick() {
      this.$emit('button-clicked', '按钮被点击了！'); // 通过事件与父组件通信
    }
  }
};
</script>

<style scoped>
/* 定义组件独有的样式 */
p {
  color: blue;
}
</style>

<template>
  <div>
    <slot>默认插槽内容</slot> <!-- 如果没有内容传递，则显示默认内容 -->
  </div>
</template>

<template>
  <div>
    <slot name="header">默认头部</slot>
    <slot>默认内容</slot>
    <slot name="footer">默认底部</slot>
  </div>
</template>

<!-- 父组件 -->
<ChildComponent>
  <template #header><h1>自定义头部</h1></template>
  <p>自定义内容</p>
  <template #footer><footer>自定义底部</footer></template>
</ChildComponent>

<template>
  <component :is="currentComponent" />
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  data() {
    return { currentComponent: 'ComponentA' }; // 当前显示的组件
  },
  components: { ComponentA, ComponentB }
};
</script>

const AsyncComponent = () => import('./MyComponent.vue');

<template>
  <keep-alive>
    <component :is="currentComponent" />
  </keep-alive>
</template>

<template>
  <div v-once>静态内容，仅渲染一次</div>
</template>

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const count = ref(0); // 定义响应式数据

    const increment = () => {
      count.value++;
    };

    onMounted(() => {
      console.log('组件已挂载');
    });

    return { count, increment }; // 返回模板使用的数据和方法
  }
};