Question

我有一个特殊的应用程序，我希望在安装时在每个组件上运行一个方法。所以我可以将方法作为全局mixin或其他东西，然后简单地做..

mounted(){
   this.mySpecialMethod();
}

但是，我想知道是否可以简单地扩展Vues挂钩，因此该方法在安装时始终在每个组件上运行。我无法在这方面找到信息。

Answer 1

如果您真的希望所有内容都调用mounted挂钩，则可以使用global mixin。

下面，我们有mixin myMixin，每次安装或销毁某些内容时都会记录到控制台。运行该示例时，您可以看到每次单击加号按钮时，它都会运行组件的mounted挂钩以及mixin的挂钩。

如果您想扩展它以便它可以作为库重用，您可以从中创建plugin。

＆＃13;

const foo = {
  template: "<div @click='onClick'>hello</div>",
  mounted() {
    console.log("Foo's mounted");
  },
  methods: {
    onClick() {
      console.log("click");
    }
  }
}

const myMixin = {
  mounted() {
    console.log("I've been mounted");
  },
  destroyed() {
    console.log("I've been destroyed");
  }
};

Vue.mixin(myMixin);

const app = new Vue({
  el: "#app",
  data() {
    return {
      foos: []
    };
  },
  components: {
    foo
  },
  methods: {
    add() {
      this.foos.push("fizz");
    },
    remove() {
      this.foos.pop();
    }
  }
});

＆＃13;

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <button @click="add()">+</button><button @click="remove()">-</button>
  <ul>
    <li v-for="f in foos">
      <foo></foo>
  </ul>
</div>

＆＃13;

扩展Vue生命周期钩子

1 个答案: