# v3_study

**Repository Path**: frontend-qin/v3_study

## Basic Information

- **Project Name**: v3_study
- **Description**: 第一次写vue3
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-12-18
- **Last Updated**: 2022-02-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## setup 使用 defineProps

- 第一种语法

```ts
defineProps<{
  msg: string; // 定义string 类型
  num: number; // 定义number 类型
  list: Array<number>; // 定义 数组 类型【每个元素只能是 数字】
  msgs: Array<string>; // 定义string 类型【每个元素只能是 字符串】
}>();
```

- 第二种语法

```ts
type PeopleType = {
  name: string;
  age: number;
  gender: "man" | "woman" | "";
};
interface DefinePropsType {
  msg: string; // 定义string 类型
  num: number; // 定义number 类型
  list: Array<number>; // 定义 数组 类型【每个元素只能是 数字】
  msgs: Array<string>; // 定义string 类型【每个元素只能是 字符串】
  people: Array<PeopleType>; // 定义更复杂的类型
}
defineProps<DefinePropsType>();
```

## setup 使用 defineEmits

- defineEmits 定义事件回调函数 ts 类型

```vue
<button @click="addHandler">点击改变</button>
<button @click="accumulationHandler">点击累加10</button>
```

```ts
// 定义事件类型
const emit = defineEmits<{
  (event: "change"): void; // 不传参的定义
  (event: "update", num: number): void; // 传参的定义
}>();

// 使用change函数
const addHandler = () => {
  emit("change"); // 调用自定义的函数
};
// 使用 update 函数
const accumulationHandler = () => {
  emit("update", 10); // 传参调用
};
```

- 父组件使用

```vue
<!-- 同vue2 正常语法一样 -->
<DefineEmits @change="changeNum" @update="updateHandler" />
```

## reactive 用于包装引用数据类型

- 使用泛型

```ts
<script lang="ts" setup>
import { reactive } from "vue";
// 定义类型
interface Prople {
  name: string;
  age: number;
  list: Array<number>;
}
// 使用泛型
const model = reactive<Prople>({
  name: "李思",
  age: 10,
  list: [1, 2, 3],
});
</script>
```

- 泛型 T 继承自 object， 所以可以直接使用

```ts
const model2 = reactive({
  name: "李思",
  age: 10,
  list: [1, 2, 3],
});
```

## ref 包装 简单数据类型

```ts
// 用于修饰 基本数据类型
import { ref } from "vue";

const num = ref<number>(10);
const str = ref<string>("自渡船");

// 当然，如果你非要 修饰引用数据，也是可以的， 他会内部使用 reactive 转化
//官网说明： 如果将对象分配为 ref 值，则它将被 reactive 函数处理为深层的响应式对象。
// const obj = ref({ name: 10 });
```

## defineExpose 暴露数据

- 子组件的方法和属性变量 向外暴露

```ts
import { ref } from "vue";

const b = ref(1);
const a = ref(2);

const add = () => {
  b.value += 1;
};

defineExpose({
  a,
  add,
});
```

- 通过绑定 ref 在父组件中获取子组件的实例，以及获取 dom 元素

```vue
<template>
  <!-- 给组件绑定 ref -->
  <DefineExpose ref="root" />
  <button @click="add">调用子组件</button>
  <p ref="p_dom">我是p元素</p>
  <button @click="getDom">获取dom元素</button>
</template>

<script setup lang="ts">
import { ref } from "vue";
import DefineExpose from "./components/defineExpose/index.vue";

// 使用ref 组件的实例 [ref()函数不要传入任何值，否则会有 ts 的错误编译提示]
const root = ref();
// 点击 调用 子组件的方法
const add = () => {
  root.value.add(); // 调用子组件暴露的 add 方法
  console.log(root.value.a); // 获取子组件的 a 属性的值
};

const p_dom = ref();

const getDom = () => {
  console.log(p_dom.value);
};
// ref获取dom
</script>
```

## 使用 withDefaults 渲染默认值

```vue
<template>
  <div>
    <p>zi组件</p>
    <p>{{ name }}</p>
    <p>{{ age }}</p>
  </div>
</template>
<script lang="ts" setup>
// 使用类型声明时的默认 props 值

interface Model {
  name?: string;
  age?: number;
}

// 给非必传 props 定义默认值
withDefaults(defineProps<Model>(), {
  name: "文化人",
  age: 100,
});
</script>
```

## v3 中在组件上使用 v-mdel

- 父组件使用 v-model 给子组件传值

```vue
<template>
  <VModel v-model="test" @span-click="spanClick" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import VModel from "./components/vModel/index.vue";

// 传给子组件的值
const test = ref(0);

// 子组件的回调函数
const spanClick = (model: any) => {
  console.log(model.item, model.index);
};
</script>
```

- 子组件的写法

```vue
<template>
  <!-- 渲染 3个色块，点击哪个， 哪个的颜色改变 -->
  <span
    v-for="(item, index) in [`hello`, `world`, `ShangHai`]"
    @click="changeModelValue(item, index)"
    :class="modelValue === index && `active`"
  >
    {{ item }}
  </span>
  <span>{{ modelValue }}</span>
</template>
<script lang="ts" setup>
//参考文档v-model参数说明： 默认情况下，组件上的 v-model 使用 modelValue 作为 prop 和 update:modelValue 作为事件。我们可以通过向 v-model 传递参数来修改这些名称

defineProps<{
  modelValue: number; // 接受v-model 上传入的值
}>();

// 定义事件类型
const emit = defineEmits<{
  (event: "update:modelValue", val: number): void;
  (event: "spanClick", params: { item: string; index: number }): void;
}>();

const changeModelValue = (item: any, index: number) => {
  emit("update:modelValue", index); // 修改v-model的值
  emit("spanClick", { item, index }); // 这个是自己定义的事件回调函数
};
</script>
<style scoped>
span {
  padding: 10px;
  background-color: #fcf;
  margin-right: 10px;
}
.active {
  background-color: aquamarine;
  color: #fff;
}
</style>
```

## 自定义 v-model 的使用

- 父组件中使用 【v-model:自定义字符串="传入的值"】

```vue
<template>
  <VModelDiy v-model:index="index" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import VModelDiy from "./components/vModelDiy/index.vue";
const index = ref(0);
</script>
```

- 子组件中使用

```vue
<template>
  <span
    v-for="(item, key) in [`hello`, `world`, `ShangHai`]"
    @click="changeModelValue(item, key)"
    :class="index === key && `active`"
  >
    {{ item }}
  </span>
</template>
<script lang="ts" setup>
defineProps<{
  index: number; // 接收自定义的值
}>();

const emit = defineEmits<{
  (event: "update:index", val: number): void; // 更新值
}>();

const changeModelValue = (item: any, index: number) => {
  emit("update:index", index);
};
</script>
```

## 插槽 和 具名插槽

- 子组件中

```vue
<template>
  <button>
    <!-- 常规插槽 -->
    <slot></slot>
  </button>

  <h1>
    <!-- 具名插槽 -->
    <slot name="header"></slot>
    <!-- 具名插槽的缩写，作用同上 -->
    <!-- <template #header>我是header</template> -->
  </h1>
</template>
```

- 父组件中使用子组件

```vue
<template>
  <VSlot>
    <span>按钮</span>
    <!-- 具名插槽 只能用在 template 上 -->
    <template v-slot:header>我是header</template>
  </VSlot>
</template>

<script setup lang="ts">
import { ref } from "vue";
import VSlot from "./components/VSlot/index.vue";
</script>
```

## Provide 和 Inject 的使用

- 父组件中渲染

```vue
<template>
  <ProvideInject />
  <button @click="changeModel">change model</button>
</template>

<script setup lang="ts">
import { provide, reactive, ref } from "vue";
import ProvideInject from "./components/Provide_Inject/index.vue";
import { People } from "./types/index";

const model = reactive<People>({
  name: "李思",
  age: 120,
});

// 定义provide
provide("app", model);

const changeModel = () => {
  model.name = "王干娘";
};
</script>
```

- 子组件中使用

```vue
<template>
  <div>{{ name }} - {{ age }}</div>
</template>
<script lang="ts" setup>
import { inject, toRefs } from "vue";
import { People } from "../../types";

// 使用Provide中的值
const model = inject<People>("app")!;

// 要想响应式解构的话， 必须使用toRefs
const { name, age } = toRefs(model);
</script>
```