Как вызывать функции и переменные в Component в Vue.js - PullRequest
Новая
       17

Как вызывать функции и переменные в Component в Vue.js

0 голосов
/ 16 мая 2018

У меня есть две части кода: 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
        },
        ......
                }
})

Возникает проблема, связанная с тем, что я хочу вызвать функцию Reset () в page_0, когда запускается функция Reset в объекте Vue 'app'. Я хочу знать, как это сделать.

1 Ответ

0 голосов
/ 16 мая 2018

Сначала определите ссылку на дочерний компонент 

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

Затем вы можете получить доступ к его методам непосредственно из родительского 

this.$refs.page0.Reset();

Подробности в документах

...