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，然后在mounted（）方法中指定一个值，如：

主要部分

<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

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