javascript - 使用 Vue Js 切换类，从组件中获取所有 props

Question

这是我在index.php中的一个side-nav组件

<div class="container">
    <side-nav></side-nav>
</div>

这就是我在 SideNav.vue 中的内容

<template>
<div class="container">
    <nav-section name="General">
        <nav-item name="Home">
            <nav-child name="Dahsboard 1" url="#"></nav-child>
            <nav-child name="Dahsboard 2" url="#"></nav-child>
        </nav-item>

        <nav-item name="Settings">
            <nav-child name="Setting 1" url="#"></nav-child>
            <nav-child name="Setting 2" url="#"></nav-child>
        </nav-item>

        <nav-item name="Admin">
            <nav-child name="Admin 1" url="#"></nav-child>
            <nav-child name="Admin 2" url="#"></nav-child>
        </nav-item>
    </nav-section>

    <nav-section name="Data Analysis">
        <nav-item name="Data Source">
            <nav-child name="Source 1" url="#"></nav-child>
            <nav-child name="Source 2" url="#"></nav-child>
        </nav-item>

        <nav-item name="Visualization">
            <nav-child name="Chart 1" url="#"></nav-child>
            <nav-child name="Chart 2" url="#"></nav-child>
        </nav-item>

        <nav-item name="Others">
            <nav-child name="Other 1" url="#"></nav-child>
            <nav-child name="Other 2" url="#"></nav-child>
        </nav-item>
    </nav-section>
</div>
</template>

<script>
    import NavSection from './NavSection.vue'
    import NavItem from './NavItem.vue'
    import NavChild from './NavChild.vue'

    export default {
        components: {
            'nav-section':NavSection,
            'nav-item':   NavItem,
            'nav-child':  NavChild,
        },

        data() {
            return {

            }
        },

        mounted() {
            console.log('Component mounted.')
        },


    }
</script>

这就是我在 NavSection.vue 中的内容

<template>
    <section>
        <h6>{{ name }}</h6>

        <ul>
            <slot></slot>
        </ul>
    </section>
</template>

<script>
    export default {
        props: ['name'],

        data() {
            return {

            }
        }
    }

</script>

这就是我在 NavItem.vue 中的内容

<template>
    <li>
        <a @click="toggleClass">{{ name }}</a>

        <ul :class="{ 'active': isActive}">
            <slot></slot>
        </ul>
    </li>
</template>

<script>
    export default {
        props: ['name'],

        data() {
            return {
                isActive: false,
                names: []
            }
        },

        created() {
            //this returns all the names in console
            console.log(this.name)

            //However, saving it to data->names array, only saves the clicked item
            this.names = this.name
        },

        methods: {

            toggleClass() {
                this.isActive = true

                //this works, but I want the value to go back to FALSE once I clicked on another item

                //one way I think it can be accomplished is comparing the cliked item's name prop with all the names
                //something like this, (refer to created method)
                this.names.forEach(element => {
                    this.isActive = (element.name == this.names)
                })

            }
        }

    }
</script>

这就是我在 NavChild.vue 中的内容

<template>
    <li>
        <a :href="url">{{ name }}</a>
    </li>
</template>

<script>
    export default {
        props: ['name', 'url'],

        data() {
            return {

            }
        }
    }
</script>

如您所见，每个 navSection 都有多个 navItem，每个 navItem 都有多个 navChild 组件。当通过单击 NavItem 中的每个 anchor 标记触发函数 toggleClass 时，我想要 1. isActive 属性应将其值更新为 TRUE 对于该特定项目，2. 一旦我单击每个部分中的另一个项目，isActive 就会返回到 False。

我有一个可行的想法，如 NavItem.vue 文件中所述，但不幸的是我找不到一种方法来获取所有 props，例如name 属性，用于 NavItem 组件中的每个项目。有没有办法获取并保存特定 prop 的所有传递数据？

任何改进代码的建议，或任何其他方便的方法来完成相同的事情将不胜感激。快乐编码!

Answer 1

在这里，您的方法是面向 HTML 的，而 Vue 方法是面向模型的。因此，您应该使用所需的层次结构创建一个数据模型，并让您的组件呈现它，而不是在 HTML 中布置模型结构。

我将我的应用程序设置为部分级别，因为您关心该级别以下发生的情况。我创建了一个类似于示例第一部分的数据模型。

仅选择一个行为的技巧是应该有一个变量来保存当前选定的值。该值归父级所有。每个 child 都会得到一个 prop 告诉它是否是选定的值。

当子级被选中时，它会发出一个事件，由父级处理(这是 the Vue way of child-to-parent communication )。

Vue.component('nav-child', {
  template: '#nav-child-template',
  props: ['name', 'url']
});

Vue.component('nav-item', {
  template: '#nav-item-template',
  props: ['name', 'children', 'isActive'],
  methods: {
    toggleClass() {
      this.$emit('activate', this.isActive ? null : this.name);
    }
  }
});

new Vue({
  el: '#nav-section',
  data: {
    activeItem: null,
    items: [{
        name: 'Home',
        children: [{
            name: 'Dashboard 1',
            url: '#'
          },
          {
            name: 'Dashboard 2',
            url: '#'
          }
        ]
      },
      {
        name: 'Settings',
        children: [{
            name: 'Setting 1',
            url: '#'
          },
          {
            name: 'Setting 2',
            url: '#'
          }
        ]
      }
    ]
  },
  methods: {
    activate(name) {
      this.activeItem = name;
    }
  }
});

.active {
  border: thin solid red;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<template id="nav-child-template">
    <li>
        <a :href="url">{{ name }}</a>
    </li>
</template>

<template id="nav-item-template">
    <li>
        <a @click="toggleClass">{{ name }}</a>

        <ul :class="{ 'active': isActive}">
            <li is="nav-child" v-for="child in children" :name="child.name" :url="child.url"></li>
        </ul>
    </li>
</template>

<ul id="nav-section">
  <li is="nav-item" v-for="item in items" :name="item.name" :is-active="activeItem === item.name" :children="item.children" @activate="activate"></li>
</ul>