Vue3 笔记（持续更新）

1. 操作 DOM 元素

(1) 获取单个 DOM 元素

<template>
  <div>
    <div ref="divRef"></div>
  </div>
</template>

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

const divRef = ref(null);

// 一定要在onMounted 钩子函数中访问
onMounted(() => {
  console.log(divRef);
  console.log(divRef.value);
  divRef.value.style.width = '100px';
  divRef.value.style.height = '100px';
  divRef.value.style.backgroundColor = 'red';
})
</script>

<style scoped>

</style>

2. 计算属性 computed

<script setup>
import {computed, ref, isRef} from "vue";

  let a = ref('zhang');
  let b = ref('san');
  let sum = computed(() => {
    return a.value + b.value;
  })
console.log(sum.value);
console.log(isRef(sum));  // true

</script>

判断变量是否是ref 使用 isRef API。

3. 组件间事件传递

（1）子组件中触发事件改变父组件中的数据

实现子组件点击按钮，将父组件中的数据修改。

子组件代码:

<template>
  <div>
    <h3>子组件</h3>
    <!-- 子组件中触发父组件中定义的事件 -->
    <button @click="testFun('change', userInfo)">点击</button>
  </div>
</template>

<script setup>

import {defineEmits, ref} from 'vue';

// 接收父组件传来的方法
const testFun = defineEmits(['change']);
// 子组件中定义参数
const userInfo = ref({
  name: 'zs',
  age: 18
});
</script>

<style scoped>

</style>

 父组件代码

<template>
  <div style="margin-left: 30px">
    <h1 style="color: red">父组件</h1>
    <div>
      <div>num数据: {{num}}</div>
      <div>用户名：{{user.name}}</div>
      <div>年龄：{{user.age}}</div>
    </div>

    <!-- 引入子组件-->
    <my-child @change="testChange"/>
  </div>

</template>

<script setup>
import MyChild from "@/components/emit_test/MyChild";
import {ref, isRef, reactive} from "vue";

// 父组件中定义的响应式数据
const num = ref(10);
const user = reactive({});

// 父组件中定义函数，接收参数
const testChange = (params) => {
  num.value++;
  console.log("====", params);
  console.log("====", isRef(params));   // false
  user.name = params.name;
  user.age = params.age;
}


</script>
<style scoped>

</style>

函数的传递关系： 

如果再要定义一个事件，可以这样写

子组件

// 接收父组件传来的方法
const testFun = defineEmits(['change', 'show']);

// 加一个按钮触发
<button @click="testFun('show')">按钮2</button>

父组件

<!-- 引入子组件-->
<my-child @change="testChange" @show="testShow"/>

const testShow = () => {
  console.log("testShow");
}

多个事件同理