2

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

子组件的ajax请求clipboard.png

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

17biu 86
2016-05-25 提问

查看全部 8 个回答

28

其实不用去注册事件,有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>

推荐答案

4

已采纳

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

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

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

当然,如果你熟悉vuex,用这个也很好!

补充:

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

推广链接