3.28

1. 标签样式实现

2.this函数的作用域/prototype/最简写法

2.1 普通函数和箭头函数的this作用域

代码演示；

const obj = {
  name: 'csq',
  fn() {
    setTimeout(() => {
      console.log(this.name);
    }, 1000);
  }
};

obj.fn(); // 输出csq

1.fn为普通函数，调用方式决定fn的this； 定时器内部为箭头函数，作用域为父级函数作用域；
2.调用obj.fn（）：箭头函数作用域为父级作用域：fn（）； fn（）被obj对象调用，则fn的this指向obj：最终输出obj.name

3.vue3生命周期-每个周期的执行操作

4.祖孙组件通讯--组件通讯拓展

grandparent.vue

<template>
  <div>
    <parent> </parent>
  </div>
</template>
<script setup>
import { ref, provide } from "vue";
import parent from "./parent.vue";
import son from "./son.vue";

// 1.通过响应式变量传值
const msg = ref("grandparents providing");
provide("msg", msg);

const add = ref(0);
setInterval(() => {
  if (add.value <= 5) {
    add.value++;
  }
}, 1000);
provide("add", add);
</script>
<style scoped>
div {
  padding: 20px;
  border: 2px solid red;
  margin: 10px;
}
</style>

parent.vue

<template>
  <div>
    parent: {{ add }}
    <son></son>
  </div>
</template>
<script setup>
import { inject } from "vue";
import son from "./son.vue";
const add = inject("add", 0);
</script>
<style scoped>
div {
  padding: 20px;
  border: 2px solid blue;
  margin: 10px;
  color: black;
}
</style>

son.vue

<template>
  <div>son: {{ msg }}</div>
</template>
<script setup>
import { inject } from "vue";
const msg = inject("msg", "default msg");
</script>
<style scoped>
div {
  padding: 20px;
  border: 2px solid green;
  margin: 10px;
  color: black;
}
</style>

结果；

5.slots插槽

5.1 默认插槽-一个组件只能有一个默认插槽

slotsparents.vue

<template>
  <div>
    <slotsson>
      <h2>我是父组件传来的信息</h2>
    </slotsson>
  </div>
</template>
<script setup>
import slotsson from "./slotsson.vue";
</script>
<style></style>

slotsson.vue

<template>
  <div class="slotsson">
    我是子组件，下面是插槽内容
    <slot></slot>
  </div>
</template>
<script setup></script>
<style>
.slotsson {
  background-color: red;
  color: white;
  padding: 20px;
}
</style>

结果：

5.2 具名插槽

slotsparents.vue

<template>
  <div>
    <slotsson>
      <template #title> 我是父组件传来的标题<br /> </template>
      <template #content> 我是父组件传来的内容 </template>
    </slotsson>
  </div>
</template>
<script setup>
import slotsson from "./slotsson.vue";
</script>
<style></style>

slotsson..vue

<template>
  <div class="slotsson">
    <!-- 具名插槽 -->
    <slot name="title"></slot>
    <slot name="content"></slot>
  </div>
</template>
<script setup></script>
<style>
.slotsson {
  background-color: red;
  color: white;
  padding: 20px;
}
</style>

结果：

5.3 作用域插槽（scoped slot）（最常用插槽类型）

子组件通过slot把数据暴露给父组件使用 slotsparents.vue

<template>
  <div>
    <slotsson v-slot="user">
      <h3>name:{{ user.user.name }} age:{{ user.user.age }}</h3>
    </slotsson>
  </div>
</template>
<script setup>
import slotsson from "./slotsson.vue";
</script>
<style></style>

slotsson.vue

<template>
  <slot :user="user"></slot>
</template>
<script setup>
const user = {
  name: "slotsson",
  age: 20,
};
</script>
<style>
.slotsson {
  background-color: red;
  color: white;
  padding: 20px;
}
</style>

结果：

6.v-if与v-show区别

主要区别：v-if为对dom的创建和销毁，v-show为对dom的显示与隐藏

7.vuerouter中的动态路由

7.1 params：必须声明动态路由

路由配置：

{
  path: '/user/:id',
  name: 'User',
  component: User
}

路由传参使用：(使用push)

router.push({
  name: 'User',
  params: { id: 123 }
})

7.2 query

路由配置：

{
  path: '/user',
  component: User
}

路由传参

router.push({
  path: '/user',
  query: { id: 123 }
})