Question

初始化组件时，我运行数据回调，如：

data(){
    return {
        name: myNameGetter(),
        age: myAgeGetter(),
        // etc...
    }
},

然后警告一些父组件关于此组件的逻辑：

created(){
    this.$emit('personFullName', this.getFullName());
},

然后我的观察者也有同样的逻辑：

watch: {
    person: function(){
        this.name = myNameGetter();
        this.age = myAgeGetter();
        this.$emit('personFullName', this.getFullName());
    }
}

有没有办法干这个？

我想出的唯一想法是：

watch: {
    person: function(){
        const data = this.data();
        for (let key in data) this[key] = data[key];
        this.$emit('personFullName', this.getFullName());
    }
}

但感觉还有点不爽。社区如何解决这个问题？

Answer 1

所以这是一个例子，真实生活应用程序是一个日历。在容器中我有日历标题。然后我有月，星期和日视图的子组件。容器中的标题由子组件设置。因此，如果它的月份视图，孩子将发出＆＃34; 2017年3月和＃34;，如果是日视图，则其他子组件将发出＆＃34; 3月31日＆＃34;。等等。问题是我必须在组件初始化时调用数据中的getter函数，也可以在监视时调用，并在创建时将其发送到父级。这就是我想干的原因。

之前我在Vue中创建了一个日期/时间选择器，它类似于您的Calendar组件，因为有一个容器组件（DateTimePicker），它有2个子组件（DatePicker和TimePicker）。根据是否正在编辑日期或时间，一次只能看到一个子组件。

我认为重组组件共享数据的方式会更好。听起来像儿童组件紧密耦合到日历组件（这很好）。我不确定您的日历组件是用于用户输入（用户可以选择日期吗？），还是仅显示特定日期。

为什么子组件有责任确定标题？每个子组件共享相同的日期，因此日历组件可以根据可见的子组件轻松确定标题，如：

<div class="calendar">
  <div class="cal-title">{{ title }}</div>
  <day v-if="view === 'day'" :value="date" @input="onInput"></day>
  <week v-if="view === 'week'" :value="date" @input="onInput"></week>
  <month v-if="view === 'month'" :value="date" @input="onInput"></month>
</div>

{
  props: ['date'],

  data() {
    return {
      view: 'day',
      // This component has no internal state for the date
    };
  },

  computed: {
    title() {
      switch (this.view) {
        case 'day': return this.date.format('day'); break;
        case 'week': return this.date.format('week'); break;
        case 'month': return this.date.format('month'); break;
      }
    },
  },

  methods: {
    onInput(date) {
      this.$emit('input', date);
    },
  },
}

Vues.js组件中的DRY初始化

1 个答案: