vuejs，如何在父组件调用子组件的方法？

Question

vuejs，如何在父组件调用子组件的方法，即在父组件点击按钮，弹出一个模态框，然后进行ajax请求，ajax请求方法写在子组件模态框中。求指导啊
父组件的点击方法

子组件的ajax请求

他俩之间的通信不会弄了。。

Answer 1

可以用事件方式: $emit和$on

1. 在父组件里通过$refs拿到子组件，然后调用$emit方法通知子组件

2. 在子组件里通过$on方法监听上一步广播的事件名，然后在callback里发你的ajax就好了

当然，如果你熟悉vuex，用这个也很好！

补充：

为了方便理解，给你一个简单的示意demo吧： plunker

Answer 2

其实不用去注册事件，有ref，就可以直接拿到子组件的所有的方法（vue2）：

child1.vue

<template>
    <div>
        child1
    </div>
</template>

<script>
    export default {
        name: "child1",
        props: "msg",
        methods: {
            handleParentClick(e) {
                console.info(e)
            }
        }
    }
</script>

parent.vue

<template>
    <div>
        <button v-on:click="clickParent">点击</button>
        <child1 ref="child1"></child1>
    </div>
</template>

<script>
    import Child1 from './child1';
    export default {
        name: "parent",
        components: {
            child1: Child1
        },
        methods: {
            clickParent() {
                // this.$refs.child1.$emit('click-child', "high");
                this.$refs.child1.handleParentClick("ssss");
            }
        }
    }
</script>

Answer 3

vue2 可以直接在父组件中使用this.$refs访问子组件并调用其接口，比如this.$refs.child.childFn()

Answer 4

方法1: 用prop
父:

<comp :method="method"></comp>

{
methods: {
   method: function(){
    ....
   }
}
}

子:

<div @click="click">点击</div>

{
props: ['method'],
methods: {
   click: function(){
       this.method()
   }
}
}

方法2: 参考官方 http://cn.vuejs.org/api/#vm-dispatch

Answer 5

vm.$broadcast

Answer 6

http://www.zhihu.com/question/35820643

Answer 7

@leftstick 提拱的方法可行!

var child = {
  created: function(){
    this.$on('click-child', function(){
      console.log('send ajax here');
    });
  },
  template: '<div></div>'
};


var app = {
  template: '<div><button v-on:click="clickParent">点击</button><child v-ref:child></child><div>',
  methods: {
    clickParent: function(){
       this.$refs.child.$emit('click-child');
    }
  },
  components: {
    child: child
  }
};


new Vue({el: 'body', components: {app: app}});

Answer 8

如果是子组件的子组件呢 父组件要如何调用他的方法呢

Answer 9

this.$refs.child.$emit('click-child');
这种方式也不太好。如果一个页面上有多个child实例要同时更新呢？还需要挨个来更新。是不是可以使用this.$broadcast来做。