vue.js - Vue.js将函数从父级传递到子级

Question

我有一个初学者的问题，关于从 parent 到 child 传递功能。在我的示例中，我想多次使用该子项，有时还应使用v-on:focus进行其他操作。我怎样才能做到这一点？有一些通过prop传递的选项，但是我不知道如何，我认为这样做不好吗？也许使用EventBus，如果可以，那么如何？我想知道在VueJs中如何做的正确方法。

这是父组件:

import Child from "./child.js";
export default {
  name: "app",
  components: {
    Child
  },
  template: ` 
              <div>
                <child></child>
                <child></child>
                <child></child>
              </div>
            `
};

这是子组件:

export default {
  name: "test",
  template: `
              <div class="form-group">
                <div class="input-group">
                  <input v-on:focus="functionFromChild">
                  </div>
              </div>
            `,
  methods: {
    functionFromChild() {
      //run the function from parent
    }
  }
};

Answer 1

您可以像其他 Prop 一样传递函数

import Child from "./child.js";
 export default {
  name: "app",
  components: {
   Child
  },
  methods: {
   calledFromChild(id){
     console.log(id)
   }
  },
  template: ` 
          <div>
            <child :callback="calledFromChild" id="1"></child>
            <child :callback="calledFromChild" id="2"></child>
            <child :callback="calledFromChild" id="3"></child>
          </div>
        `
 };

然后在 child

export default {
 name: "test",
 props: ["callback", "id"],
 template: `
          <div class="form-group">
            <div class="input-group">
              <input v-on:focus="() => this.calledFromChild(this.id)">
              </div>
          </div>
        `,
 }

我还要给 child 添加一个ID，以便您知道哪个 child 在打电话。

但这不是 ，不是。您应该使用 child 的 emit发送事件，并使用 parent 的 listen发送事件。

在 child 里

export default {
 name: "test",
 template: `
          <div class="form-group">
            <div class="input-group">
              <input v-on:focus="handleFocus">
              </div>
          </div>
        `,
  methods: {
   handleFocus() {
    this.$emit('focusEvent')
   }
  }
};

而在 parent

<child @focusEvent="handleFocusFromChild"></child>

一个工作示例 here