浅聊一下Vue3中的component组件

<script setup></script>
<template>
  <div class="header"></div>
</template>
<style scoped lang="less">
.header {
  position: absolute;
  width: 100%;
  height: 80px;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0) 100%
  );
}
</style>

<script setup>
import Header from "./Header.vue";
</script>
<template>
  <div class="container">
    <Header></Header>
  </div>
</template>
<style scoped lang="less">
.container {
  width: 100%;
  height: 100%;
}
</style>

<script setup>
const props = defineProps({
  title: String,
  userInfo: Object
});
function doSomething(){
  if(props.userInfo.isVip){
    ...
  }
}
</script>
<template>
  <div class="header">{{props.title}}</div>
</template>
<style scoped lang="less">
...
</style>

<script setup>
import Header from "./Header.vue";
let userInfo;
let title;
</script>
<template>
  <div class="container">
    <Header :title="title" :userInfo="userInfo"></Header>
  </div>
</template>
<style scoped lang="less">
...
</style>

  props: {
    // 基础的类型检查 (`null` 和 `undefined` 值会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组的默认值必须从一个工厂函数返回
      default() {
        return { message: 'hello' }
      }
    },
    // 具有默认值的函数
    propG: {
      type: Function,
      // 与对象或数组的默认值不同，这不是一个工厂函数——这是一个用作默认值的函数
      default() {
        return 'Default function'
      }
    }
  }

<script setup>
...
</script>
<template>
  <div class="header" >
    <input ...>
  </div>
</template>
<style scoped lang="less">
...
</style>

<Header id="my-header"></Header>

<div class="header" id="my-header">
  <input ...>
</div>

<script>
export default {
  inheritAttrs: false
};
</script>
<script setup>
...
</script>
<template>
  <div class="header" >
    <input ... v-bind="$attrs">
  </div>
</template>
<style scoped lang="less">
...
</style>

<div class="header">
  <input ...  id="my-header">
</div>

<script setup>
const emit = defineEmits(["onSelected"]);
function selectItem(item){
  emit("onSelected", item);
}
</script>
<template>
  <div class="header" >
    ...
  </div>
</template>
<style scoped lang="less">
...
</style>

<script setup>
import Header from "./Header.vue";
function headerSelected(item){
}
</script>
<template>
  <div class="container">
    <Header @onSelected="headerSelected"></Header>
  </div>
</template>
<style scoped lang="less">
...
</style>

<my-component v-model:title="bookTitle"></my-component>

<script setup>
const props = defineProps({
  title: String
});
const emit = defineEmits(["update:title"]);
const setTitle = (newTitle) => {
  emit("update:title", newTitle);
}
</script>
<template>
  <div class="header" >
    ...
  </div>
</template>
<style scoped lang="less">
...
</style>

<script setup>
...
</script>
<template>
  <div class="header" >
    <slot>default</slot>
  </div>
</template>
<style scoped lang="less">
...
</style>

<script setup>
import Header from "./Header.vue";
</script>
<template>
  <div class="container">
    <Header>newtitle</Header>
  </div>
</template>
<style scoped lang="less">
...
</style>

<Header>
 <button>submit</botton>
</Header>

<script setup>
...
</script>
<template>
  <div class="header" >
    <div name="leftbar" >
      <slot>left</slot>
    </div>
    <div name="rightbar" >
      <slot>right</slot>
    </div>
  </div>
</template>
<style scoped lang="less">
...
</style>

<script setup>
import Header from "./Header.vue";
</script>
<template>
  <div class="container">
    <Header>
      <template v-slot:leftbar >
        <button>left</button>
      </template>
      <template v-slot:rightbar >
        <button>right</button>
      </template>
    </Header>
  </div>
</template>
<style scoped lang="less">
...
</style>

<div v-for="item in list" >
  <slot></slot>
</div>

<my-component >
  <img :src="item.img"></img>
</my-component>

<div v-for="item in list" >
  <slot :item="item"></slot>
</div>

<my-component >
  <template v-slot:default="slotProps">
    <img :src="slotProps.item.img"></img>
  </template>   
</my-component>

<my-component v-slot="slotProps">
  <img :src="slotProps.item.img"></img> 
</my-component>

<script setup>
const userid = "123";
provide("userid", userid);
</script>
...

<script setup>
const userid = inject("userid", defaultId);
</script>
...

<script setup>
const userid = ref("123");
provide("userid", userid);
</script>
...

<script setup>
import Header from "./Header.vue";
const headerRef = ref();
</script>
<template>
  <div class="container">
    <Header ref="headerRef">
      ...
    </Header>
  </div>
</template>
<style scoped lang="less">
...
</style>

<template>
  <div class="container">
    <item ref="itemRef" v-for="item in list">
      ...
    </item>
  </div>
</template>

<table>
  <my-component></my-component>
</table>

<table>
  <tr is="vue:my-component"></tr>
</table>

<script setup>
defineExpose({
  onEvent
});
function onEvent(event) {
  console.log(`header: ${event}`);
}
</script>
<template>
  <div class="header" >
    ...
  </div>
</template>
<style scoped lang="less">
...
</style>

<script setup>
import Header from "./Header.vue";
const headerRef = ref();
function headerEvent(event){
  headerRef.value.onEvent(event);
}
</script>
<template>
  <div class="container">
    <Header ref="headerRef">
      ...
    </Header>
  </div>
</template>
<style scoped lang="less">
...
</style>

const headerRef = ref();
const footerRef = ref();

import EventEmitter from "events";
const eventEmitter = new EventEmitter();
export const WsEvent = {
  emit: data => {
    eventEmitter.emit("wsevent", data);
  },
  on: callback => {
    eventEmitter.on("wsevent", callback);
  }
};