Question

我有root vue组件app.js：

...
const app = new Vue({
    el: '#app',
    ...
    methods: {
        modalShow: function(target, id=null, message=null){
           ...
        },
        ...
    }
});

我有一个像这样的子组件：

<template>
    <div>
        <ul>
            <li> 
                <a href="#" class="thumbnail"
                   title="Add photo" 
                   @click="modalShow('modal-add-photo', product.id)"
                > 
                    <span class="fa fa-plus fa-2x"></span> 
                </a> 
            </li>
        </ul>
    </div>
</template>

<script>

    export default {
        ...
        methods: {
            ...
        }
    }
</script>

modalShow方法位于根目录中。我怎么能从孩子那里打电话呢？

如果现在执行上面的代码，我会收到以下错误：

[Vue警告]：未定义属性或方法“modalShow” 实例，但在渲染期间引用。确保声明被动数据选项中的数据属性。

Answer 1

将modalShow方法向下传递给子组件。

<child :modal-show="modalShow"></child>

export default {
  props:["modalShow"]
}

然后你可以在孩子身上使用这个方法。

如何在全局vue组件中调用方法？

1 个答案: