vue.js - VUE/NUXT:将随机数作为道具传递给子组件
问题描述
我想在 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,但事实并非如此。
我设法为我的项目找到了解决方法,但我仍然对这里的解决方案感兴趣。
任何帮助将不胜感激,谢谢!
解决方案
问题是您需要首先将 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
因为您不知道您的数据或计算函数触发和初始化变量的次数。
推荐阅读
- c++ - 无效的用户定义转换:C++ 错误
- swift - 如何从不同的类(Swift)引用自定义单元格内的插座
- react-native - 我无法在 React Native 中垂直对齐我的登录表单
- javascript - “DataTables 警告:无效的 JSON 响应”和“错误:未找到图形容器元素”
- javascript - 查找在数组中出现奇数次的 int
- javascript - Php - 使星号之间的文本变为粗体
- algorithm - 这可以近似吗?
- python-3.x - XPath 获取类中的一组特定元素
- angular - 错误类型错误:无法读取未定义的属性“getMonth”
- jquery - LayerSlider 启动触发器