Vue3 知识点

1. 调用子组件的属性和方法

// father.vue
<template>
  <son ref="sonRef"></son>
</template>

<script setup>
import { onMounted, ref } from "vue";
import Son from "./view/son.vue";
const sonRef = ref(null);


// son.vue<template>
  <div>子组件</div>
</template>

<script setup>
const name = "jack";

const fn = () => {
  console.log("执行了fn");
};

defineExpose({
  name,
  fn,
});
</script>

2. 设置动态Ref（动态获取dom节点）

// 方法一：
<div :ref="`Ref${index}`"></div>

script中：
import { getCurrentInstance } from "vue";
const ctx = getCurrentInstance();

需要使用动态ref的函数中：
ctx.refs[`Ref${index}`].function();
*****************************************************************************
// 方法二：
let videoRef = {};  // 存放所有动态ref

// 获取动态ref 方式一 getAttribute()
const getVideoRef = (el) => {
  if (el && videoRef.hasOwnProperty(el.getAttribute("name"))) return;
  if (el && el.getAttribute("name")) {
    videoRef[el.getAttribute("name")] = el;
  }
};
// 获取动态ref 方式二 $attrs
const getVideoRef = (el) => {
	if ((el && el.$attrs['name'] >= 0) || (el && el.$attrs['name'])) {
		startRef[el.$attrs['name']] = el
		console.log('el', el.$attrs['name'])
	}
}