Question

我有一个laravel vue项目，该项目显示组件中的项目列表。组件在安装后会进行ajax调用以填充数据元素。但是，页面上还有其他项目（不在vue中）可以向数据库添加元素，我想确保列表在组件中是反应性的。

mounted() {
    this.getTasks();
},
methods: {
    getTasks() {
        let self = this;
        axios.get('/tasks').then(response => {
            self.tasks = response.data;
        })
        .catch(function (error) {
            console.log(error);
        });
    },
}

当用户执行将任务添加到列表的操作时，是否有办法从组件外部激发组件上的getTasks方法？

Answer 1

您可以在安装组件时声明一个全局函数（将上下文绑定到Vue组件）：

mounted() {
  windows.getTasks = this.getTasks.bind(this);
  this.getTasks();
},

然后，您可以在呼叫getTasks()或windows.getTasks()之外使用它

Answer 2

您应该使用vuex操作。

这是一个例子：

Vue.component('ChildB',{
  template:`
    <div class="child childB">
      <h1> Score: {{ score }} </h1>
      <button @click="changeScore">Change Score</button>
    </div>`,
  computed: {
    score () {
      return this.$store.getters.score
    }
  },
  methods: {
    changeScore () {
      this.$store.dispatch('incrementScore', 3000)
    }
  }
})

完整来源：

https://codepen.io/tutsplus/pen/MXpPLz

从外部重新加载vue组件

2 个答案: