vue mouned里无法使用this.$refs和getElementById

1.问题起因:

在vue子组件的mounted里试图使用this.$refs获取标签,然后给标签添加事件,但是发现一直提示undefined,getElementById也无法起作用,理论上mounted是在组件已经挂载之后的钩子,应该可以获取到标签的

 

2.前提:

我是在子组件的template标签下的根div设置了v-if,试图通过在父组件v-bind的方式传prop值给子组件来控制子组件的显隐藏

 

3.测试:

测试发现,在我还没在父组件通过点击事件让子组件显示的情况下,子组件的已经出触发了mounted,这个就不对了

 

4.结论:

子组件标签在父组件显示的时候就已经执行生命周期了,虽然内容不一定有,但是生命周期都执行了。

必须要给在父组件的子组件标签加上v-if,如果没有设置v-if="false",虽然能控制子组件根div的隐藏,但是子组件本身的生命周期已经执行,而这个时候子组件又没有内容,所以this.$refs和getElementById为undefined或者null

至于子组件怎么控制怎么控制父组件里v-if绑定的值,参考.sync修饰符

Vue 3 中,`this.$refs` 是一个特殊的属性,它提供了一种直接访问组件实例中 DOM 元素的方式。当在模板中使用 `ref` 属性绑定一个元素时,Vue 会将这个引用存储在 `$refs` 对象中,让你可以在任何时候通过组件实例访问到那个元素。 以下是如何在 Vue 3 中使用 `this.$refs` 的基本步骤: 1. **定义 ref**: 在你的模板(`.vue` 文件的 template 部分)中,为需要引用的元素添加 `ref` 属性,例如 `<div ref="myRef"></div>`。 2. **获取引用**: 在组件的 `setup` 函数或 methods 中,你可以通过 `this.$refs` 访问到这个元素。例如: ```javascript export default { setup() { const myRef = ref(null); // 创建一个响应式的 ref 变量来保存引用 onMounted(() => { // 当组件已挂载,你可以获取到 DOM 元素 const domElement = this.$refs.myRef; if (domElement) { console.log('DOM element:', domElement); } }); // 或者在事件处理器中使用 function handleClick() { if (myRef.value) { myRef.value.style.backgroundColor = 'red'; } } return { handleClick, myRef }; } } ``` 3. **使用**: 在事件处理函数或生命周期钩子(如 `onMounted`、`onUpdated` 等)中,你可以直接操作 `this.$refs.myRef` 的属性或方法。 **相关问题--:** 1. Vue 3 中的 `ref` 是什么时候初始化的? 2. 如何在 Vue 3 的自定义事件中使用 `$refs`? 3. `$refs` 是否仅在组件挂载后可用?如果组件被卸载,还能保持引用吗?
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值