VUE--- ref 获取dom -- 使用 ref 在父子组件中的传值 -- defineExpose_defineexpose ref

ref 获取dom

任务:获取span标签

<template>
	// 2.把常量ref到这里 就拿到了
	<span ref="getspan"></span>
</template>
1
2
3
4

先看js代码

import{ ref, onMounted } from "vue";
// 1.使用ref获取dom 首先定义一个响应式的常量 并赋值为 null
const getspan = ref(null);
// 获取可以在挂载前 因为ref是响应式挂载后会被重新赋值 
// 但操作dom必须在 挂载后 生命周期钩子函数里
onMounted(() => {
	// 操作 dom
	getspan.value.style.color = "red";
	getspan.value.innerHTML = "这个字被设置为红色";
})
1
2
3
4
5
6
7
8
9
10

以上为vue ref 获取dom 操作dom 的简单演示

ref—子传父

1.需要两个组件

1.父组件: CallChildFunc.vue
2.子组件: TextBarChild.vue

2.操作子组件

<template>
</template>
1
2

import { ref } from "vue";
// 定义一个被传的值
const jsonNameToParent = { strName: "卡卡西" };
// 核心--定义抛出(暴露)
difineExpose()
	jsonNameToParent,  // 抛出对象
})
1
2
3
4
5
6
7

3.操作父组件

<template>
	<span> {{ strNameFromChild }} </span>
</template>
1
2
3

import { ref, onMounted } from "vue";
// 将子组件引入
import ComponetTextBarChild from "@/.../TextBarChild.vue";// 具体参考自己的路径
// 定义变量存储值
let strNameFromChild = ref("");
onMounted(() => {
	strNameFromChild.value = jsonNameToParent.value.strName;
});
1
2
3
4
5
6
7
8

如图效果,值已经传到父组件了

ref—父传子

1.操作子

<template>
	<div>{{ strNameFromparent }}</div>
</template>
1
2
3

import { ref } from "vue";
// 定义一个变量
let strNameFromparent = ref("");
// 定义一个被传的带参函数
function handleShow(strVal){
	strNameFromParent.value = strVal;
}
// 核心--定义抛出(暴露)
difineExpose()
	handleShow         // 抛出函数
})
1
2
3
4
5
6
7
8
9
10
11

3.操作父组件

<template>
	<ComponetTextBarChild ref="TextBarChildInner" />
	<!-- 定义按钮触发handParentShow ..> headleShow -->
	<button class="ProcUnitBtn3R" @click="handleParentShow">执行handleShow</button>
</template>
1
2
3
4
5

import { ref, onMounted } from "vue";
// 将子组件引入
import ComponetTextBarChild from "@/.../TextBarChild.vue";// 具体参考自己的路径
// 获取子组件dom
const TextBarChildInner = ref(null);
// 定义变量存储值
let strNameFromChild = ref("");
// 定义函数
function handleParentShow(){
    TextBarChildInner.value.handleShow("水遁,大坝谁修哈");
}
1
2
3
4
5
6
7
8
9
10
11

点击按钮后子组件状态

两者原理一样
与组件间传值使用provide那个相似

父组件中操作子组件dom

1.操作子组件

<template>
	<span ref="spanTextToParent"></span>
</template>
1
2
3

// 在子组件中获取dom
const spanTextToParent = ref(null);
// 抛出dom
difineExpose({
	spanTextToParent
})
1
2
3
4
5
6

2.操作父组件

<template>
	<ComponetTextBarChild ref="TextBarChildInner" />
</template>
1
2
3

import { ref, onMounted } from "vue";
// 将子组件引入
import ComponetTextBarChild from "@/.../TextBarChild.vue";// 具体参考自己的路径
onMounted(() => {
	TextBarChildInner.value.spanTextToParent.innerHTML = "小姑娘真好看";
});
1
2
3
4
5
6

整体过程就是

子组件在自身获取dom const getdom = ref(null)
抛出给父组件 defineExpose({ getdom })
父组件拿过来用 子组件.子组件里的dom