VUE/NUXT：将随机数作为道具传递给子组件

Question

我想在 vue 组件中有一个 randomNumber 变量。 但是在我的模板和我的脚本标签中，这些值永远不会匹配。

使用数据：

<template>
 <div :data-number="randomNumber"
</template>
<script>
export default {
 data (){
  return { randomNumber: Math.random() * 1000}
 },
 mounted: function(){
  console.log(this.randomNumber)
 }
}
</script>

使用计算属性：

<template>
 <div :data-number="randomNumber"
</template>
<script>
export default {
 computed{
  randomNumber: Math.random() * 1000
 },
 mounted: function(){
  console.log(this.randomNumber)
 }
}
</script>

或者将 randomNumber 作为道具从我的父组件传递。

我希望 data-number 等于 this.randomNumber，但事实并非如此。

我设法为我的项目找到了解决方法，但我仍然对这里的解决方案感兴趣。

任何帮助将不胜感激，谢谢！

Answer 1

问题是您需要首先将 randomNumber 变量编号初始化为 null，然后在mount()方法中分配一个值，例如：

主要组件

<template>
  <div id="app">
    {{randomNumber}}
   <ChildComp :randomNum="randomNumber"/>
  </div>
</template>

<script>
import ChildComp from './components/ChildComp'
export default {
  name: "App",
  data (){
    return { 
      randomNumber: null
    }
 },
 mounted: function(){
  this.randomNumber = Math.random() * 1000
 },
 components: {
   ChildComp
 }
};
</script>

子组件

<template>
  <div>{{randomNum}}</div>
</template>

<script>
export default {
  name: "ChildComp",
  props: {
    randomNum: Number
  }
};
</script>

这每次都给出相同的输出

190.9193234159494
190.9193234159494

因为您不知道您的数据或计算函数触发和初始化变量的次数。