Examples of custom components of vue3 study notes

<!-- src/components/ -->
<script lang="ts">
import type { IDataItem } from "../type/customlist";
// IProps cannot be imported directly from the outside, there will be an error at present, and may be supported in the future (someone mentioned the issue)export interface IProps {
  title?: string;
  data: Array<IDataItem>;
}
</script>
<script setup lang="ts">
import { onMounted } from "vue";
// Declare some properties, pass values ​​to the parent component, and set default values ​​to the partconst props = withDefaults(defineProps<IProps>(), {
  title: "CustomList",
});
// Throw an event for use by the parent component// const emit = defineEmits(["click-item"]);
const emit = defineEmits<{
  (e: "click-item", item: IDataItem, $event: Event): void;
}>();
const clickItem = function (item: IDataItem, e: Event) {
  // You can perform some operations in the function  ("Custom component clicks on the item inside the component...", item, e);
  // Throw the macro-defined event  emit("click-item", item, e);
};
onMounted(() => {
  ("CustomList onMounted...", props);
});
</script>
<template>
  <h1>{{ title }}</h1>
  <ul @click="$emit('click-ul', $event, 1)">
    <li @click="clickItem(item, $event)" v-for="item in data" :key="">
      {{  }}
    </li>
  </ul>
</template>
<style lang="less" scoped></style>

// src/type/
export interface IDataItem {
  name: string;
  id: number;
}

<!-- src/ -->
<script setup lang="ts">
import { ref, reactive, onMounted, onBeforeMount } from "vue";
import CustomList from "./components/";
import type { IDataItem } from "./type/customlist";
// Declare a data and pass it to the custom component CustomListconst data = reactive([] as Array<IDataItem>);
const customListRef = ref<HTMLElement | null>(null);
// Click the item of the custom component, execute the custom component to throw the macro definition event and receive the parameters it carries overconst clickItem = function (item: string, e: Event) {
  ("clickItem...", item, e);
};
// Click the event directly thrown in the temple of the custom component and receive the parameters it carriesconst clickUl = function (e: Event, value: number) {
  ("clickUl...", e, value);
};
onBeforeMount(() => {
  const list: Array<IDataItem> = [
    {
      name: "aaa",
      id: 1,
    },
    {
      name: "bbb",
      id: 2,
    },
  ];
  (...list);
});
onMounted(() => {
  ("onMounted...", );
});
</script>
<template>
  <div class="content">
    <!-- Using custom componentsCustomList -->
    <CustomList
      @click-ul="clickUl"
      @click-item="clickItem"
      :data="data"
      ref="customListRef"
    />
  </div>
</template>
<style scoped lang="less">
.content {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--colorTextNormal);
  padding: 50px;
}
</style>

<script setup>
import ComponentA from './'
</script>
<template>
  <ComponentA />
</template>

const props = defineProps(['title'])
()

import type { IDataItem } from "../type/customlist";
// IProps cannot be imported directly from the outside, there will be an error at present, and may be supported in the future (someone mentioned the issue)export interface IProps {
  title?: string;
  data: Array<IDataItem>;
}
const props = withDefaults(defineProps<IProps>(), {
  title: "CustomList",
});

<script setup lang="ts">
import { onMounted } from "vue";
// Declare some properties, pass values ​​to the parent component, and set default values ​​to the partconst props = withDefaults(defineProps<IProps>(), {
  title: "CustomList",
});
onMounted(() => {
    // ❎ Can't do this, one-way data stream props cannot be modified     = "Changed the title of CustomList"
});
</script>

<!-- MyComponent -->
<button @click="$emit('someEvent', $event, 1)">click me</button>

<script>
// Throw an event for use by the parent componentconst emit = defineEmits<{
  // (e: "Topped event name", thrown parameter one, parameter two...)  (e: "callback", $event: Event): void;
}>();
const callback = function (e: Event) {
  emit("callback", e);
};
</script>
<template>
  <button @click="callback($event, 111)">click me</button>
</template>

<script>
import MyComponent from "./components/";
const callback = function (e: Event, value) {
    ("callback...", e, value);
}
</script>
<template>
    <MyComponent @some-event="callback" />
</template>

<!-- Subcomponents SubmitButton -->
<button type="submit">
  <slot>Here is the default content text</slot>
</button>
<!-- use SubmitButton (No value passed) ，The button is displayed internally【Here is the default content text】-->
<SubmitButton />
<!--  use SubmitButton (Pass the value) ，The button is displayed internally【Save】-->
<SubmitButton>Save</SubmitButton>

<slot name="header"></slot>

<!-- Subcomponents MyComponent -->
<template>
    <slot name="header" message="hello header"></slot>
    <slot message="hello default"></slot>
    <slot name="footer" message="hello footer"></slot>
</template>
<!-- Parent component -->
<!-- headerProps, defaultProps, footerProps is an object ，Return to correspond slot superior { property: property值 } Data in form -->
<MyComponent>
  <template #header="headerProps">
    {{  }}
  </template>
  <template #default="defaultProps">
    {{  }}
  </template>
  <template #footer="footerProps">
    {{  }}
  </template>
  <!-- Deconstruct the value 🌰 -->
   <template #footer="{ message }">
    {{ message }}
  </template>
</MyComponent>