javascript - 设计一个无需事件即可提供数据的 VueJS 组件

Question

我正在尝试设计一个在 VueJS 中选择日期范围的组件。从组件通过 props 获取的特定键(“realtime”、“today”、“yesterday”)或用户使用选择器更改的特定键(“realtime”、“today”、“yesterday”)，它将返回:

• 作为 JS Date 对象的开始/停止日期
• 开始/停止该时期的人类再现
• 根据区域设置对 key 进行人工表示。

我的概念目标是使用这样的组件(无效语法，但这只是为了解释问题):

Select your period:
<DateRangeSelector v-model="drskey" ref="drs">

Selected period: {{ drs.periodName }}
Dates: {{ drs.dateStartHuman }} to {{ drs.dateStopHuman }}

请注意:

• 没有 VueX 状态(无需在全局状态中存储任何内容)
• 除了“父”组件中的“ key ”之外，我不想存储任何其他内容
• refs 不起作用，因为它们没有在开始时初始化

有什么建议吗？

Answer 1

如果您不想在父组件中存储除“键”之外的任何内容，那么为什么不将生成的字符串的输出移动到子组件本身中。 然后你可以观察 props 或 select 输入的变化并输出字符串，而无需返回父级......

但是，如果您的用例示例不完整并且您需要对父级中的数据执行更多操作，那么另一种方法是让 v-model 使用对象而不是字符串。类似于 {key: 'realtime'}。然后在子组件内部，当值发生变化时，您可以使用“填充”对象发出“输入”事件，在其中添加所有计算数据。因此，在父组件中，您将完全按照所示方式使用数据在你的例子中..像这样:

父组件:

    Select your period:
    <data-range-selector v-model="drs" />
    Selected period: {{ drs.periodName }}
    Dates: {{ drs.dateStartHuman }} to {{ drs.dateStopHuman }}

    {    
      data: () => ({ 
        drs: {key: 'realtime'} 
      })
    }

子组件:

<input v-model="key">

    {
      props: { value: Object },
      data: () => ({ key: '' }),
      watch: {
        value () { this.key = this.value.key },
        key () { this.returnResults()   }
      },
      created () {
          this.key = this.value.key
          this.returnResults()
      },
        computed: {
        periodName () { return this.key },
        dateStartHuman () { return `When ${this.key} starts` },
        dateStopHuman () { return `When ${this.key} stops` }
      },

      methods: {
        returnResults () {
          this.$emit('input', {
            key: this.key,
            periodName: this.periodName, 
            dateStartHuman: this.dateStartHuman,
            dateStopHuman: this.dateStopHuman
          })
        }
      }
    }

这是工作 fiddle .. https://jsfiddle.net/tyminko/jwLet0n5/13/