templateref html内容,（十一）template和ref获取元素或组件实例

这一节将介绍到的是Vue3.x中我们如何通过ref获取元素节点或者组件实例

1、概述：通过ref获取模板元素节点

2、使用：由vue提供，按需引入：import { ref } from 'vue';

3、回顾：options API中是：this.

refs.refDiv(获取某个元素节点)

3、用例：

在组件或节点中定义ref属性：add(ref="refAdd")或div(ref="refDiv")

在setup中定义对应ref属性值相同的变量名，赋值为任意值即可

访问方式为：refAdd.value或refDiv.value

content

import { ref } from 'vue';

export default {

setup() {

const divBox= ref(null); //

content

const user= ref(null); // user.value --> null

return { divBox };

};

};

4、注意：①：元素节点对应ref的分配只会在render时进行对比赋值，因此若在setup中未将对应的响应式变量return出来，则不会获取到组件实例或元素节点。②：在满足①的前提下，只要在定义变量时变量名称与当前组件中ref属性值相同，则该变量会被统一赋值为组件实例或者元素节点，与定义变量时的赋值无关。

5、扩展(RFC.5版本没有此功能)：因我们还在setup的context中访问到refs对象，所以获取组件实例或者元素节点的方式还可以是：

content

import { ref } from 'vue';

export default {

setup(props, { refs }) {

const divBox= refs.divBox;

return { divBox };

};

};

ps：一切你认为的困难，都是你的欲望和不自信在作祟。