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

Posted 2023-02-23

【中文标题】VUE/NUXT：将随机数作为道具传递给子组件

【英文标题】：VUE/NUXT: Pass random number as props to child component

【发布时间】：2019-08-20 09:12:22

【问题描述】：

我想在 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 作为 props 从我的父组件传递。

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

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

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

【问题讨论】：

我在一些小提琴中尝试了你的组件：jsfiddle.net/Al_un/xwrpn2ea。唯一的区别是我也在div 中显示了值，但它确实对我有用。我的控制台显示正确的值，所以我看不出问题出在哪里 (-_-)

【参考方案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

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

【讨论】：

据我了解，您设计 Main 组件的方式听起来与计算属性的需求完全一样

正确，也可以通过计算属性来实现。其实我试过文森特写的代码没有问题，可能是其他一些代码破坏了他的应用程序，我认为在mounted方法中初始化变量更可靠，因为它只会被调用一次。