<!-- src/components/CustomList.vue -->
<script lang="ts">
import type { IDataItem } from "../type/customlist";
// IProps 不能直接從外部導(dǎo)入，當前會報錯，以后可能會支持（有人提了issue）
export interface IProps {
  title?: string;
  data: Array<IDataItem>;
}
</script>
<script setup lang="ts">
import { onMounted } from "vue";
// 聲明一些屬性，給父組件傳值進來，并且給部分設(shè)置了默認值
const props = withDefaults(defineProps<IProps>(), {
  title: "CustomList",
});
// 拋出事件，供父組件使用
// const emit = defineEmits(["click-item"]);
const emit = defineEmits<{
  (e: "click-item", item: IDataItem, $event: Event): void;
}>();
const clickItem = function (item: IDataItem, e: Event) {
  // 可以在函數(shù)里執(zhí)行完一些操作
  console.log("自定義組件點擊了組件里面的item...", item, e);
  // 再拋出宏定義的事件
  emit("click-item", item, e);
};
onMounted(() => {
  console.log("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="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>
<style lang="less" scoped></style>

// src/type/customlist.d.ts
export interface IDataItem {
  name: string;
  id: number;
}

<!-- src/App.vue -->
<script setup lang="ts">
import { ref, reactive, onMounted, onBeforeMount } from "vue";
import CustomList from "./components/CustomList.vue";
import type { IDataItem } from "./type/customlist";
// 聲明一個data，傳到自定義組件CustomList
const data = reactive([] as Array<IDataItem>);
const customListRef = ref<HTMLElement | null>(null);
// 點擊了自定義組件的item，執(zhí)行了自定義組件拋出宏定義事件并接收其攜帶過來的參數(shù)
const clickItem = function (item: string, e: Event) {
  console.log("clickItem...", item, e);
};
// 點擊了自定義組件的ul在templete里面直接拋出的事件并接收其攜帶過來的參數(shù)
const clickUl = function (e: Event, value: number) {
  console.log("clickUl...", e, value);
};
onBeforeMount(() => {
  const list: Array<IDataItem> = [
    {
      name: "aaa",
      id: 1,
    },
    {
      name: "bbb",
      id: 2,
    },
  ];
  data.push(...list);
});
onMounted(() => {
  console.log("onMounted...", customListRef.value);
});
</script>
<template>
  <div class="content">
    <!-- 使用自定義組件CustomList -->
    <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 './ComponentA.vue'
</script>
<template>
  <ComponentA />
</template>

const props = defineProps(['title'])
console.log(props.title)

import type { IDataItem } from "../type/customlist";
// IProps 不能直接從外部導(dǎo)入，當前會報錯，以后可能會支持（有人提了issue）
export interface IProps {
  title?: string;
  data: Array<IDataItem>;
}
const props = withDefaults(defineProps<IProps>(), {
  title: "CustomList",
});

<script setup lang="ts">
import { onMounted } from "vue";
// 聲明一些屬性，給父組件傳值進來，并且給部分設(shè)置了默認值
const props = withDefaults(defineProps<IProps>(), {
  title: "CustomList",
});
onMounted(() => {
    // ? 不能這么干，單向數(shù)據(jù)流 props 不可修改
    props.title = "改變了CustomList的title"
});
</script>

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

<script>
// 拋出事件，供父組件使用
const emit = defineEmits<{
  // (e: "拋出的事件名", 拋出的參數(shù)一, 參數(shù)二...)
  (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/MyComponent.vue";
const callback = function (e: Event, value) {
    console.log("callback...", e, value);
}
</script>
<template>
    <MyComponent @some-event="callback" />
</template>

<!-- 子組件 SubmitButton -->
<button type="submit">
  <slot>這里是默認內(nèi)容文本</slot>
</button>
<!-- 使用 SubmitButton (不傳值) ，按鈕內(nèi)部顯示【這里是默認內(nèi)容文本】-->
<SubmitButton />
<!--  使用 SubmitButton (傳值) ，按鈕內(nèi)部顯示【Save】-->
<SubmitButton>Save</SubmitButton>

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

<!-- 子組件 MyComponent -->
<template>
    <slot name="header" message="hello header"></slot>
    <slot message="hello default"></slot>
    <slot name="footer" message="hello footer"></slot>
</template>
<!-- 父組件 -->
<!-- headerProps, defaultProps, footerProps 是一個對象 ，返回以對應(yīng) slot 上 { 屬性: 屬性值 } 形式的數(shù)據(jù) -->
<MyComponent>
  <template #header="headerProps">
    {{ headerProps.message }}
  </template>
  <template #default="defaultProps">
    {{ defaultProps.message }}
  </template>
  <template #footer="footerProps">
    {{ footerProps.message }}
  </template>
  <!-- 解構(gòu)取值的 ?? -->
   <template #footer="{ message }">
    {{ message }}
  </template>
</MyComponent>