ref 获取dom
任务:获取span标签
<template>
// 2.把常量ref到这里 就拿到了
<span ref="getspan"></span>
</template>
先看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 = "这个字被设置为红色";
})
以上为vue ref 获取dom 操作dom 的简单演示
ref—子传父
1.需要两个组件
1.父组件: CallChildFunc.vue
2.子组件: TextBarChild.vue
2.操作子组件
<template>
</template>
import { ref } from "vue";
// 定义一个被传的值
const jsonNameToParent = { strName: "卡卡西" };
// 核心--定义抛出(暴露)
difineExpose()
jsonNameToParent, // 抛出对象
})
3.操作父组件
<template>
<span> {{ strNameFromChild }} </span>
</template>
import { ref, onMounted } from "vue";
// 将子组件引入
import ComponetTextBarChild from "@/.../TextBarChild.vue";// 具体参考自己的路径
// 定义变量存储值
let strNameFromChild = ref("");
onMounted(() => {
strNameFromChild.value = jsonNameToParent.value.strName;
});
如图效果,值已经传到父组件了
ref—父传子
1.操作子
<template>
<div>{{ strNameFromparent }}</div>
</template>
import { ref } from "vue";
// 定义一个变量
let strNameFromparent = ref("");
// 定义一个被传的带参函数
function handleShow(strVal){
strNameFromParent.value = strVal;
}
// 核心--定义抛出(暴露)
difineExpose()
handleShow // 抛出函数
})
3.操作父组件
<template>
<ComponetTextBarChild ref="TextBarChildInner" />
<!-- 定义按钮触发handParentShow ..> headleShow -->
<button class="ProcUnitBtn3R" @click="handleParentShow">执行handleShow</button>
</template>
import { ref, onMounted } from "vue";
// 将子组件引入
import ComponetTextBarChild from "@/.../TextBarChild.vue";// 具体参考自己的路径
// 获取子组件dom
const TextBarChildInner = ref(null);
// 定义变量存储值
let strNameFromChild = ref("");
// 定义函数
function handleParentShow(){
TextBarChildInner.value.handleShow("水遁,大坝谁修哈");
}
点击按钮后子组件状态
两者原理一样
与组件间传值使用provide那个相似
父组件中操作子组件dom
1.操作子组件
<template>
<span ref="spanTextToParent"></span>
</template>
// 在子组件中获取dom
const spanTextToParent = ref(null);
// 抛出dom
difineExpose({
spanTextToParent
})
2.操作父组件
<template>
<ComponetTextBarChild ref="TextBarChildInner" />
</template>
import { ref, onMounted } from "vue";
// 将子组件引入
import ComponetTextBarChild from "@/.../TextBarChild.vue";// 具体参考自己的路径
onMounted(() => {
TextBarChildInner.value.spanTextToParent.innerHTML = "小姑娘真好看";
});
整体过程就是
子组件在自身获取dom const getdom = ref(null)
抛出给父组件 defineExpose({ getdom })
父组件拿过来用 子组件.子组件里的dom