Question

我有一个初学者的问题，关于将功能从父级传递到子级的问题。在我的示例中，我想多次使用该子项，有时它应该做一些其他事情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

您可以像其他任何道具一样传递函数

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>
        `
 };

然后在孩子中

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>
        `,
 }

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

但这不是好主意。您应该使用来自孩子的emit发送事件，并使用来自父母的listen发送事件。

在孩子中

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')
   }
  }
};

在父母中

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

工作示例here

Answer 2

这应该有效：

const Child = {
  template: `
           <div class="form-group">
                <div class="input-group">
                  <input v-on:focus="functionFromChild">
                  </div>
              </div>
  `,
  props: {
  functionFromParent: Function
  },
  methods: {
  functionFromChild: function() {
    this.functionFromParent();
  }
  },
  data() {
    return {
      message: 'Oh hai from the component'
    }
  }
}
const App = {
  template: `
    <div>
     <h1>Quick test</h1>
     <p>{{ message }}</p>
     <Child :functionFromParent="functionOnParent"/>
     <Child :functionFromParent="functionOnParent"/>
     <Child :functionFromParent="functionOnParent"/>
    </div>
  `,
  components: {Child},
  methods: {
   functionOnParent: function(){
   console.log("there we go");
   }
  },
  data() {
    return {
      message: 'Hello'
    }
  }
}

new Vue({
  render: h => h(App),
}).$mount('#app')

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>


<div id="app">
</div>

Answer 3

如果您尝试从子组件中调用父函数，请尝试

this.$parent.parentMethod()

这将调用父组件中的方法。

Vuejs将函数从父级传递到子级

3 个答案: