Question

我正在建立一个讲故事的网站。当用户单击某些内容时，将显示一个新的布局，可以是覆盖整个屏幕的视频或图片。当按下下一步按钮时，它必须显示一些新内容，但网址必须保持不变。

我一直在尝试使用vue中的组件，但是我不明白如何处理将页面重写为其他内容的点击。

我有一个文件start.vue，其中包含用于开始屏幕的模板，还有firstvideo.vue（例如），具有其自己的模板。如何将这两个事件与click事件联系起来？

App.vue-文件：

<template>
        <div id="app">
            <keep-alive>
                <component :is="selectedComponent"></component>
            </keep-alive>
        </div>
</template>

<script>
    import Start from './components/Start.vue'
    import FlyingVideo from './components/FlyingVideo.vue'

    export default {
        name: 'app',
        components: {
            Start, FlyingVideo
        },
        data (){
            return {
                selectedComponent: 'Start'
            }
        }
    };
</script>

Start.vue-文件：

<template>
    <span>
        <h1>Title</h1>
        <button @click="selectedComponent = 'FlyingVideo'">Start</button>
    </span>
</template>

<script>
    export default {
        name: 'Start'
    }
</script>

FlyingVideo.vue-文件：

<template>
    <span>
        <h1>Video</h1>
        <p>Video coming soon</p>
    </span>
</template>

<script>
    export default {
        name: 'FlyingVideo'
    }
</script>

从我编写的代码中，我可以显示Start.vue中的第一个组件，但是我无法单击并显示视频。

Answer 1

您可以不使用View路由器。在您的App.js组件中，您将初始化所有组件，并根据您的状态显示或不显示它们。在这种情况下，最好使用vuex来管理您的商店。

所以你可以做这样的事情

<component1 v-if="toDisplayComponent1"></component1>
<component2 v-if="toDisplayComponent2"></component2>
...

然后使用$ store将您的组件更改为toDisplayComponent1 ...

Answer 2

有很多方法可以处理此问题。 vue-router当然是可能的，但是对于您正在做的事情并不是特别必要，尤其是如果您不想更新网址。

在此示例中，我们具有要呈现的组件的列表，并通过更改页码来更新实际呈现的组件。

app.vue

<template>
  <div>
    <h2>This is my Vue App</h2>
    <component :is="componentViews[page]"></component>
    <button v-on:click="updateComponent">Next</button>
  </div>
</template>
<script type="text/javascript">
  module.exports = {
    data: function() {
      return {
        page: 0,
        componentViews: ['start', 'first-video']
      }
    },
    methods: {
      updateComponent: function(){
          this.page += 1;
      }
    }
  };
</script>

此处为实时示例：https://jsfiddle.net/ebbishop/u7dpwv3b/

在click事件中切换vue中的组件

2 个答案: