【学习打卡】第 14 天 Vue3(6)

课程名称：前端框架及项目面试 聚焦 Vue3/React/Webpack
课程章节：第 6 章 Vue3 学习（新）
主讲老师：双越

课程内容：

今天学习的内容包括：
6-24 ES Module 在浏览器中的应用
主要讲了 module 三种引用和条件引用
6-26 vue3 考点总结
之前讲的点重新串了一遍
6-33 Vue3-script-setup-基本使用-part1
6-34 Vue3-script-setup-属性和事件
6-35 Vue3-script-setup-暴露组件信息 defineExpose
这几节主要是详细讲解 vue 3.2 更新的 script-setup 基本使用、传值、触发事件、取值。

课程收获：

大概复述一下

ES Module

浏览器大部分支持但还未完全普及，主要是开发环境用。

<script type="module">
  // 几种引用方式
  import { add, multi } from "./src/math.js";
  import { createStore } from "https://unpkg.com/redux@latest/es/redux.mjs";
  const importPages = async () => {
    const add = await import("./pages.js");
  };
</script>
<script type="module" src="./src/index.js"></script>

script-setup-基本使用

ref、reactive、toRefs 都可使用
不用返回响应式 ref，reactive，顶级变量直接用于 template
子组件不用 components 注册
script-setup 和 script 可同时使用

<template>
  {{aRef}}{{b}}
  <child></child>
</template>
<script>
  const add = (a, b) => a + b;
</script>
<script setup>
  import { ref, reactive, toRefs, onMounted } from "vue";
  import Child from "./Child";
  const aRef = ref("a");
  const { b } = toRefs(
    reactive({
      b: "b",
    })
  );
  add(a, b);
</script>

defineProps defineEmits

用来代替 props、emits，传值触发事件。

<template>
  {{props.name}}
  <button @click="$emit('change', 'param')">change</button>
  <button @click="onClick">onClick</button>
</template>
<script setup>
  import { defineProps, defineEmits } from "vue";
  // 接受传参
  const props = defineProps({
    name: String,
    age: Number,
  });
  // 定义事件，触发父级事件监听且传参
  const emitF = defineEmits(["change", "delete"]);
  const onClick = () => {
    emitF("delete", "param");
  };
</script>

defineExpose

子暴露数据给父组件。
子

<script setup>
  import { ref, defineExpose } from "vue";
  const a = ref(101);
  const b = 201;
  defineExpose({
    a,
    b,
  });
</script>

父

<template>
  <son-1 ref="refSon1"></son-1>
</template>
<script setup>
  import { ref, onMounted } from "vue";
  const refSon1 = ref(null);
  onMounted(() => {
    // 拿到 son-1 组件的一些数据
    console.log(refSon1.value);
    console.log(refSon1.value.a);
  });
</script>