Vue.js中如何调用Component中的函数和变量答案

【问题标题】：How to call functions and variables in Component in Vue.jsVue.js中如何调用Component中的函数和变量
【发布时间】：2018-10-26 22:38:28
【问题描述】：

我有两段代码： index.html

<!DOCTYPE html>
<html>
    ......
    <body>
        <div id="app" v-cloak>
            <div class="pages">
            <page_0 v-if="Page==0"></page_0>
            </div>
            <div class="buttons">
                ......
                <button v-if="isOpen(3)" class="button-blue" @click="Reset()">Reset</button>
            </div>
        </div>
        <script src="js/vue.js"></script>
        <script src="vue/page_0.js"></script>
        ......
        <script type="text/javascript">
            var app=new Vue({
                el: '#app',
                data: {
                    Page: 0
                },
                methods: {
                    ......
                    Reset: function(){
                        switch(this.Page){
                            case 0:{
                                //Here I want to call function Reset() in component 'page_0'
                            }
                            ......
                    }
                }
            })
        </script>
    </body>
</html>

page_0.js：

Vue.component('page_0',  {
    ......
    methods: {
        Reset: function() {
            //The process of resetting data
        },
        ......
                }
})

有一个问题，当触发Vue对象'app'中的函数Reset时，我想在page_0中调用函数Reset()。我想知道该怎么做。

【问题讨论】：

标签： javascript vuejs2 vue-component

【解决方案1】：

首先，定义对子组件的引用

<page_0 ref="page0" v-if="Page==0"></page_0>

然后你可以直接从父级访问它的方法

this.$refs.page0.Reset();

详情在docs

【讨论】：