Question

在我的parent组件中，我需要触发包含child查询的Firebase组件的代码部分。请注意，在子组件中，该代码是在mounted()钩内触发的（但是为了从父组件执行该代码，我想我必须将该代码移至方法之类）。

实现这种目标的推荐方法是什么？

这是我的parent组件代码-为了清楚起见，对其进行了简化：

<template>
  <div>
    <nav>
      <v-btn @click="viewNextWeek"></v-btn>
    </nav>
    <project-row :mon="mon"></new-row-form>
  </div>
</template>

<script>
import ProjectRow from './ProjectRow.vue';
import store from '../store';
import moment from 'moment';

export default {
  name: 'home',
  components: {
    ProjectRow
  },
  data() {
    return {
      mon: moment().startOf('isoWeek')
    }
  },
  methods: {
    viewNextWeek: function() {
      this.mon = moment().startOf('isoWeek').add(7, 'days');
    }
  }
}
</script>

Child组件-也简化了：

<template>
  <div>
    <input v-model="monTime">
  </div>
</template>

<script>
import { db } from '../firebase';

export default {
  props: [
    'mon'
  ],
  mounted() {
    var timesRef = db.collection('times');
    var timesWeek = timesRef.where('date', '==', this.mon);
    timesWeek.get()
    .then((querySnapshot) => {      
      querySnapshot.forEach((doc) => {
        this.monTime = doc.data().time;
      });
    })
    .catch(function(error) {
      console.log('Error getting documents: ', error);
    });  
  }
}
</script>

Answer 1

要实现这两个组件之间应使用event bus通信。首先，您应该创建一个全局事件总线，该总线可以作为中央事件管理，并使您能够从vuejs应用程序中的任何组件访问任何事件。对于您的情况，您应该在viewNextWeek方法中从父组件发出一个事件，并在子组件的mounted中捕获该事件。因此，每次您的父组件中的mon值更改时，都会触发子组件的事件以更新其中的mon。

有关如何使用全局事件总线的更多详细信息，请阅读本文global event bus article

如何从父组件更新子组件的props的值？

1 个答案: