vue/nuxt--如何确保首先获得模板的值并将其传递给子元素？

Question

我试图从模板中获取宽度值，并将该值传递给vue/nuxt中的子组件。

然而，这是行不通的。我认为这是因为模板的宽度是在生命周期钩子的后期获得的。

如何确保首先获得宽度值，并确保子元素获得信息？

亲本

<template>
  <v-col cols="12" sm="12" md="4" ref="demandContainer">
    <div class="chart-container p-4 dark-background">
      <div class="font-weight-bold">Demand</div>
      <area-chart
        v-if="trendsData.length > 0"
        :data="trendsData"
        :baseWidth="width"
      >
      </area-chart>
    </div>
  </v-col>
</template>

<script>
export default {
  updated() {
    this.width = this.$refs.demandContainer.$el.clientWidth
  },
}
</script>

儿童

<svg ref="svg-area" :width="baseWidth" :height="baseHeight">
</svg>

错误消息

​

Answer 1

要使$refs工作，您应该确保模板完全呈现到DOM中，要做到这一点，您可以在mounted钩子中使用以下代码：

mounted() {
  this.$nextTick(() => { this.width = this.$refs.demandContainer.$el.clientWidth; });
}

根据$nextTick的vue doc

vm.$nextTick(回调)：将回调推迟到下一个DOM更新周期之后执行。在您更改了一些数据以等待DOM更新后立即使用它。这与全局Vue.nextTick相同，只是回调的这个上下文自动绑定到调用此方法的实例。

因此，在$nextTick的帮助下，您可以确保将元素呈现给DOM，以使用在元素上定义的ref。

编辑

实际上，$el是undefined。this.$refs.demandContainer返回元素本身，要获得宽度，只需使用this.$refs.demandContainer.clientWidth即可。

请查看下面的示例：

​

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  mounted() {
    console.log(this.$refs.demandContainer.clientWidth);
  },
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <v-col cols="12" sm="12" md="4" ref="demandContainer">
          <div class="chart-container p-4 dark-background">
            <div class="font-weight-bold">Demand</div>
          </div>
        </v-col>
      </v-container>
    </v-main>
  </v-app>
</div>

​

Answer 2

只有当组件对实际DOM是参考文献时，mounted才可用。

在“创建”中，它是在某个地方创建的，但尚未附加到您的页面中。

在此解释的问题是，您可能有一些问题要将其传递给子组件，因为子mounted生命周期挂钩将在父组件之前发生。

我试过一些超级讨厌的东西

async mounted() {
  await this.$nextTick()
  this.$watch(
    () => {
      return this.$refs.test.$el.clientWidth
    },
    (val) => {
      console.log('nice', val)
    },
  )
},

它没有工作，因为clientWidth将在更晚的时间点上可用(就生命周期而言)。因此，最后一个解决方案可能是使用一些更难看的setTimeout。

或者您可以用CSS解决这个问题，它将是：

• 更快
• 在网页上不太重
• 更适应
• 较少出错

因为SVG应该具有超级响应性，并且易于使用。

你能告诉我们你想用你的SVG做什么吗？

TLDR:这里不要使用JavaScript来解决响应性问题。必须使用parent + child + mounted生命周期通常不是一个好主意。