Question

我的Topbar.vue文件中有名为activeTab的数据，我希望在刀片视图中使用值来驱动其他组件，但现在仅在我的Topbar.vue组件中。

main-page-blade.php

<div id = "app"> 
   <Topbar>dsd</Topbar>
   **** wanting to do something like this: ****
   <Account v-if="activeTab === 1"></Account>
   <Names v-if="activeTab === 2"></Names> 
   ********************************************

</div>
<script type="text/javascript" src="dist/app.js">

app.js

window.Vue = require('vue');

Vue.component('topbar', require('./components/Topbar.vue').default);

export const bus = new Vue();

new Vue({
    el: "#app"
})

Topbar.vue

<template>
    <div class="cont">
        <div class="tabs">
            <a v-on:click="handleClick(1)" v-bind:class="[ activeTab === 1 ? 'active' : '' ]">Names</a>
            <a v-on:click="handleClick(2)" v-bind:class="[ activeTab === 2 ? 'active' : '' ]">Order</a>
        </div>
    </div>
</template>

<script>

    export default {

        data() {

            return {
                activeTab: 1
            }
        },

        methods: {
        handleClick: function(num) {
          this.activeTab = num
        }
    }

</script>

Answer 1

将activeTab的管理置于父组件的data（）中。

要将数据从子级传递到其父级，我们使用custom events。

因此，在您的Topbar.vue中，您可以像下面那样实现handleClick：

handleClick: function(num) {
   this.$emit('click-from-topbar', num)
}

然后您将能够在主页上捕获此事件，

<Topbar @click-from-topbar="someMethod">dsd</Topbar>

最后，您可以使用以下方法在父组件（主页）中完成所需的操作：

someMethod: function(num) {
   this.activeTab = num
}

是否在Vue文件中的单个文件组件周围传递数据？

1 个答案: