Question

我正在尝试使用vuejs创建一个温泉应用程序，但是我被困在只有拆分器有效，推送页面无效的推送页面导航器上。下面是我尝试过的。（我正在使用vue cli）

文件结构

src
    - components
        - Home.vue
        - Main.vue
        - Swipenav.vue
        - Toolbar.vue

    - App.vue
    - main.js

Swipenav.vue

<template>
    <v-ons-navigator swipeable :page-stack="pageStack" @push-page="pageStack.push($event)">
        <v-ons-page>
            <v-ons-splitter>
                <v-ons-splitter-side swipeable
                    width="150px" collapse="" side="left"
                :open.sync="openSide"
                >
                    <v-ons-page>
                        <v-ons-list>
                            <v-ons-list-item v-for="page in pages" :key="page.id" tappable modifier="chevron" @click="currentPage = page.name; openSide = false"
                            >
                                <div class="center">{{ page.title }}</div>
                            </v-ons-list-item>
                        </v-ons-list>
                    </v-ons-page>
                </v-ons-splitter-side>

                <v-ons-splitter-content>
                    <component :is="currentPage" :toggle-menu="() => openSide = !openSide"></component>
                </v-ons-splitter-content>

            </v-ons-splitter>
        </v-ons-page>
    </v-ons-navigator>
</template>


<script>
import main_tpl from './Main.vue'
import home_tpl from './Home.vue'
export default {
    name : "swipenav",
    data() {
        return {
            pageStack: [main_tpl],
            pages : [
                { name : 'main_tpl', title : 'Main' },
                { name : 'home_tpl', title : 'Home' },
            ],
            currentPage : 'home_tpl',
            openSide : false
        };
    },
    components : {
        home_tpl : home_tpl,
        main_tpl : main_tpl
    }
}
</script>

Main.vue

<template>
  <v-ons-page>
    <v-ons-toolbar>
      <div class="center">Main</div>
    </v-ons-toolbar>
    <p style="text-align: center">
      main page
      <v-ons-button @click="push_signin">Push signin</v-ons-button>
    </p>
  </v-ons-page>
</template>

<script>
import signin_tpl from './Signin.vue';
export default {
  name : 'mainpage_comp',
  methods : {
    push_signin(){
      console.log('working');
      this.$emit('push-page',signin_tpl)
    }
  }
}
</script>

我可以确认此push_signin()方法有效，但似乎this.$emit('push-page',signin_tpl)无效。有什么帮助吗，想法吗？

Answer 1

您要使用的vue custom event系统，

仅用于将数据从子组件传递到其父组件。

它不适用于像您一样的兄弟姐妹组件。您可以使用全局event bus，以便可以将事件从任何地方传递到任何地方。

为什么同时使用拆分器和推送页面导航器的VueJS Onsen应用程序中的推送页面不起作用？

1 个答案: