我有一个Vue组件,它使用 bootstrap 网格.在子组件中,我想得到控制器中某个div的当前宽度.

下面是子组件:

<template>
    <div id="bg-prev" ref="prev">
        <h1>{{x}}</h1>
    </div>
<template>

export default {
  props: ['section'],
  data() {
    return {
      x: 0,
      y: 0,
    }
  },
  mounted() {
    this.getWindowWidth();
  },
  methods: {
    getWindowWidth() {
      this.x = this.$refs.prev.clientWidth;
    }
  }
};
<style>
    #bg-prev {
      width: 100%;
    }
</style>

在本例中,宽度将始终为0,即使在我判断该元素时,该元素有一个净宽度.我缺少什么,挂载的钩子是vue生命周期中最新的一个,对吗?感谢您的帮助;)

推荐答案

除了几处输入错误,代码运行良好.(缺少结束模板标记)

不需要额外的挂钩.唯一的例外是,如果在组件的挂载方法中切换组件的呈现.然后你会使用

const that = this
that.showDiv = true
that.$nextTick(function () {
  that.getWindowWidth()
})

你确定它的父级在安装过程中有一个宽度吗?100%的0px仍然是0px.

Vue.js相关问答推荐

Nuxt3 Build . put文件夹保持空,没有从.nuxt复制任何内容

如何使用Nuxt 3动态处理无限嵌套路由?

如何解决 importers[path] is not a function for clean Vue 3/Vite/Storybook installation

纵横比元素溢出容器

Vue Js Composition Api 未定义(读取名称)

超出最大调用堆栈大小 - Vue路由

Vuetify 复选框:如何停止点击事件?

避免在运行时向 Vue 实例或其根 $data 添加响应式属性

确保在渲染组件之前加载 Vuex 状态

如何在 vue.js 模板中显示空间而不是 undefined 和 null?

一个 div 组件中的 Vue.js 2.0 路由链接

Vuetify 容器不会填充高度

错误:[vuex] 期望字符串作为类型,但发现未定义

Vuetify 输入自动完成错误

VueJS 通过渲染传递数据

Vue.js 拦截器

Vue如何将动态ID与v-for循环+字符串中的字段连接起来?

更改时(change)调用函数

无法访问函数内的数据属性

如何在 vue3 中的setup方法中发出事件?