<template>
  <!-- 非活跃的组件将会被缓存！ -->
  <KeepAlive>
    <component :is="activeComponent" />
  </KeepAlive>
</template>

<script setup>
import { onActivated, onDeactivated } from 'vue'

onActivated(() => {
  // 调用时机为首次挂载
  // 以及每次从缓存中被重新插入时
})

onDeactivated(() => {
  // 在从 DOM 上移除、进入缓存
  // 以及组件卸载时调用
})
</script>

<template>
  <!-- 以英文逗号分隔的字符串 -->
  <KeepAlive include="a,b">
    <component :is="view" />
  </KeepAlive>

  <!-- 正则表达式 (需使用 `v-bind`) -->
  <KeepAlive :include="/a|b/">
    <component :is="view" />
  </KeepAlive>

  <!-- 数组 (需使用 `v-bind`) -->
  <KeepAlive :include="['a', 'b']">
    <component :is="view" />
  </KeepAlive>
</template>

// ...
props: {
  // 基础的类型检查
  // (如果类型设置为 `null` 或 `undefined` 则 Vue 会跳过对该 prop 的类型验证)
  propA: Number,
  // 有多个配置项可设
  propB: {
    type: String,
    required: true,
    default: 'abc',
    validator: func()   // 自定义验证函数，返回 true/false
  }
  // 带有默认值的对象
  propC: {
    type: Object,
    // 对象或数组默认值必须从一个工厂函数获取
    default() {
      return { message: 'hello' }
    }
  },
  // 具有默认值的函数
  propD: {
    type: Function,
    // 与对象或数组默认值不同，这不是一个工厂函数，而是一个函数，用作默认值
    default() {
      return defaultFunction() {...}
    }
  }
}

// 祖先组件
app.component('todo-list', {
  provide: {
    user: 'John Doe'
  },
})

// 后代组件
app.component('todo-list-statistics', {
  inject: ['user'],
  created() {
    console.log(`Injected property: ${this.user}`) // 注入 property: John Doe
  }
})

import { createApp } from 'vue'

const app = createApp({})

app.provide(/* 注入名 */ 'message', /* 值 */ 'hello!')

import { provide, reactive, ref } from 'vue'
import MyMarker from './MyMarker.vue'

export default {
  setup() {
    const location = ref('North Pole')
    const geolocation = reactive({
      longitude: 90,
      latitude: 135
    })

    provide('location', location)
    provide('geolocation', geolocation)

    return {
      location
    }
  },
  methods: {
    updateLocation() {
      this.location = 'South Pole'
    }
  }
}

import { provide, reactive, readonly, ref } from 'vue'

export default {
  setup() {
    const location = reactive({location: 'North Pole'})
    const geolocation = reactive({
      longitude: 100,
      latitude: 150
    })

    const resetGeoLocation = () => {
      geolocation.longitude = 90;
      geolocation.latitude = 135
    }

    // 提供一个只读数据，即在后代组件中只允许获取该数据，而不能对其修改
    provide('location', readonly(location))
    // 提供一个数据，同时提供修改它的方法
    provide('geolocation', geolocation)
    provide('resetGeoLocation', resetGeoLocation)
  }
}

<script>
  methods: {
    onEnlargeText(enlargeAmount) {
      this.postFontSize += enlargeAmount
    }
  }
</script>

<template>
  <blog-post @enlarge-text="onEnlargeText"></blog-post>
</template>

const app = createApp({})

// 数组语法
app.component('todo-item', {
  emits: ['check'],
  created() {
    this.$emit('check')
  }
})

// 对象语法
app.component('reply-form', {
  emits: {
    // 没有验证函数
    click: null,

    // 带有验证函数
    // payload 为触发自定义事件的同时所抛出的数据
    submit: payload => {
      if (payload.email && payload.password) {
        return true
      } else {
        console.warn(`Invalid submit event payload!`)
        return false
      }
    }
  }
})

<template>
  <custom-input v-model="searchText"></custom-input>

  <!-- 等价于以下代码 -->
  <custom-input
    :model-value="searchText"
    @update:model-value="searchText = $event"
  ></custom-input>
</template>

// component
app.component('custom-input', {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  template: `
    <input
      :value="modelValue"
      @input="$emit('update:modelValue', $event.target.value)"
    >
  `
})

<custom-input v-model="searchText"></custom-input>

<!-- 使用组件 -->
<my-component v-model:title="bookTitle"></my-component>

<!-- 是以下的简写 -->
<my-component :title="bookTitle" @update:title="bookTitle = $event" />

// 组件
app.component('my-component', {
  props: ['title'],
  emits: ['update:title'],
  template: `
    <input
      type="text"
      :value="title"
      @input="$emit('update:title', $event.target.value)">
  `
})

<!-- 使用组件，实现 first-name 和 last-name 的双向绑定 -->
<user-name
  v-model:first-name="firstName"
  v-model:last-name="lastName"
></user-name>

app.component('user-name', {
  props: {
    firstName: String,
    lastName: String
  },
  emits: ['update:firstName', 'update:lastName'],
  template: `
    <input
      type="text"
      :value="firstName"
      @input="$emit('update:firstName', $event.target.value)">

    <input
      type="text"
      :value="lastName"
      @input="$emit('update:lastName', $event.target.value)">
  `
})

<my-component v-model:description.capitalize="myText"></my-component>

app.component('my-component', {
  props: ['description', 'descriptionModifiers'],
  emits: ['update:description'],
  template: `
    <input type="text"
      :value="description"
      @input="$emit('update:description', $event.target.value)">
  `,
  created() {
    console.log(this.descriptionModifiers) // { capitalize: true }
  }
})

<template>
  <div class="container">
    <header>
      <!-- 具名插槽 header -->
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <!-- 具名插槽 footer -->
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<template>
  <base-layout>
    <!-- 将内容分发到具名插槽 header 中 -->
    <template v-slot:header>
      <h1>Here might be a page title</h1>
    </template>
    <!-- 将内容分发到默认插槽中 -->
    <template v-slot:default>
      <p>A paragraph for the main content.</p>
      <p>And another one.</p>
    </template>
    <!-- 将内容分发到具名插槽 footer 中 -->
    <template v-slot:footer>
      <p>Here's some contact info</p>
    </template>
  </base-layout>
</template>

<template>
  <base-layout>
    <template v-slot:[dynamicSlotName]>
      ...
    </template>

    <!-- 缩写为 -->
    <template #[dynamicSlotName]>
      ...
    </template>
  </base-layout>
</template>

<template>
  <ul>
    <li v-for="( item, index ) in items">
      <slot :item="item"></slot>
    </li>
  </ul>
</template>

<template>
  <todo-list>
    <template v-slot:default="slotProps">
      <span class="green">{{ slotProps.item }}</span>
    </template>
  </todo-list>
</template>