Vue - 将变量作为组件道具传递

Question

我是 vue 的新手，我为我的应用程序下载了这个番茄钟计时器组件 (https://github.com/P3trur0/vuemodoro)，它运行良好，但时间在应用程序本身内部不可调整。

我正在尝试使用内置的“分钟”属性创建一个输入字段，在其中输入分钟数并将其传递给番茄计时器属性，但我不明白它是如何或是否是可以通过这种方式将变量传递给组件属性。

    '''
    
    <div>
        <b-field class="timer">
            <b-numberinput v-model="number"></b-numberinput>
        </b-field>
        <Pomodoro :minutes="1"/>
    </div>
    
    '''

Answer 1

好吧，看来番茄钟组件不支持响应式属性，所以，虽然计时器会正确设置为number的初始值，但如果number则不会更新变化。但是 - 别担心 - 有一个简单的方法解决这个问题：设置一个 key 到计时器：

<Pomodoro :key="number" :minutes="number" />

键告诉 Vue 在键更改时更新组件，因此，在这种情况下，只要 number 更改，番茄钟元素就会更新。有关键 here.

的更多信息

没有 key:

用键:

这是完整代码：

<template>
  <div id="app">
    <b-field class="timer">
      <b-numberinput v-model="number"></b-numberinput>
    </b-field>
    <Pomodoro :key="number" :minutes="number" />
  </div>
</template>

<script>
import Pomodoro from "vuemodoro";

export default {
  name: "App",
  data() {
    return {
      number: 0,
    };
  },
  components: {
    Pomodoro,
  },
  // rest of the component
};
</script>

另外，你可以试试这个demo, and view/edit the code behind it

Vue - 将变量作为组件道具传递

Vue - passing a variable as a component prop

vue.js

variables

timer

properties

countdown