<template>
  <ChildComponent name="訾博" :age="18" />
</template>

<script setup>
import ChildComponent from './ChildComponent.vue';
</script>

<template>
  <p>大家好，我叫{{ name }}，今年{{ age }}歲。</p>
</template>

<script setup>
// 接收父組件傳來的props
const props = defineProps({
  name: String,
  age: {
    type: Number,
    required: true,
    default: 10
  }
});
</script>

<template>
  <button @click="tellDad">告訴爸爸我長大了</button>
</template>

<script setup>
// 聲明要觸發(fā)的事件
const emit = defineEmits(['grow-up']);

function tellDad() {
  // 觸發(fā)事件，并可以傳遞參數(shù)
  emit('grow-up', '我已經(jīng)會自己寫代碼了！');
}
</script>

<template>
  <ChildComponent @grow-up="handleChildGrowUp" />
  <p>來自兒子的消息：{{ messageFromChild }}</p>
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const messageFromChild = ref('');

function handleChildGrowUp(message) {
  messageFromChild.value = message;
}
</script>

<template>
  <input :value="modelValue" @input="emit('update:modelValue', $event.target.value)" />
</template>

<script setup>
defineProps(['modelValue']);
const emit = defineEmits(['update:modelValue']);
</script>

<template>
  <CustomInput v-model="searchText" />
  <p>你在搜索：{{ searchText }}</p>
</template>

<script setup>
import { ref } from 'vue';
import CustomInput from './CustomInput.vue';

const searchText = ref('');
</script>

<template>
  <p>我是一個深藏不露的組件</p>
</template>

<script setup>
import { ref } from 'vue';

const doPushUp = () => {
  console.log('正在做俯臥撐...');
};

// 把doPushUp方法暴露給父組件
defineExpose({
  doPushUp
});
</script>

<template>
  <ChildComponent ref="childRef" />
  <button @click="commandChild">命令兒子</button>
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const childRef = ref(null);

function commandChild() {
  // 通過.value訪問到子組件實例，并調(diào)用其暴露的方法
  childRef.value.doPushUp();
}
</script>

<template>
  <ParentComponent />
</template>

<script setup>
import { provide, ref } from 'vue';

const themeColor = ref('dark');
// 提供數(shù)據(jù)，'theme'是暗號
provide('theme', themeColor); 
</script>

<template>
  <div :style="{ color: theme }">我是孫子組件，我用的是祖?zhèn)髦黝}色。</div>
</template>

<script setup>
import { inject } from 'vue';

// 注入數(shù)據(jù)，'theme'是暗號
const theme = inject('theme');
</script>

import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({
    name: '訾博',
    isLoggedIn: false,
  }),
  actions: {
    login() {
      this.isLoggedIn = true;
    },
  },
});

<template>
  <p v-if="userStore.isLoggedIn">歡迎回來, {{ userStore.name }}!</p>
  <button @click="userStore.login()">登錄</button>
</template>

<script setup>
import { useUserStore } from '@/stores/user';

const userStore = useUserStore();
</script>

import mitt from 'mitt';
const emitter = mitt();
export default emitter;

<script setup>
import emitter from '@/utils/emitter';

function sendMessage() {
  emitter.emit('some-event', '來自A組件的問候');
}
</script>

<script setup>
import emitter from '@/utils/emitter';
import { onMounted, onUnmounted } from 'vue';

onMounted(() => {
  emitter.on('some-event', (message) => {
    console.log(message); // "來自A組件的問候"
  });
});

// 記住，一定要在組件卸載時取消監(jiān)聽，否則會內(nèi)存泄漏！
onUnmounted(() => {
  emitter.off('some-event');
});
</script>