从父组件获取数据

Question

我有 2 个组件：

header.vue 导航.vue

在标题中我有按钮，当我单击时，在导航更改类中。但是我无法获取父组件:(如何做到这一点？

index.pug：

.g#global
            frameheader
            .frame
                navigation(:navhidden="hiddenNav", :mobileaside="asideMobile", :links=navJson) 
                .frame__content
                    block content

main.js：

import navigation from '../vue/components/nav.vue';
import frameheader from '../vue/components/frameheader.vue';

Vue.component("navigation", navigation);
Vue.component("frameheader", frameheader);

Vue.use(VueCookie);

var global = new Vue({
    el: "#global",
    data() {
        return {
            hiddenNav: false,
            asideMobile: false
        }
    }
})

Header.vue:

在标题中我有两个按钮，他们需要在 main.js 中更改数据 hiddenNav 和 asideMobile

<template lang="pug">
    header.header
        .header__left(:class="{'hidden-aside': this.$root.$emit(hiddenNav)}")
            a.header__logo(href="")
                img(src="img/logo_smart.png", alt="")
            button.header__nav(@click="hiddenNav = !hiddenNav")
                span
            button.header__nav.header__nav_mobile(@click="asideMobile = !asideMobile" :class="{'active': asideMobile}")
                span

</template>

<script>

import VueSlideUpDown from 'vue-slide-up-down'

export default {
    name: 'frameheader',
    data() {
        return {
            active: null,
            val: false
        }
    },
    methods: {
        changeMenuType() {
            this.$root.$emit(hiddenNav, true);
        }
    }
}

</script>

Nav.vue：

在 .frame__aside 我尝试读取来自 main.js 的父数据，但它不起作用（

<template lang="pug">
   .frame__aside( :class="{'hidden-aside': navhidden, 'active': mobileaside }")
</template>
<script>
    import VueSlideUpDown from 'vue-slide-up-down'
    export default {
        name: 'navigation',
        data() {
            return {
                active: null,
                val: false
            }
        },
        props: {
            navhidden: {
                type: Boolean,
                default: false
            },
            mobileaside: {
                type: Boolean,
                default: false
            }
        }
    }
</script>

Answer 1

实现你想要的方法是利用 Vue 的custom events。

在您的#global 模板中，我们需要为toggle-hidden-nav 和toggle-mobile-aside 添加监听器：

#global.g
  frameheader(@toggle-hidden-nav='hiddenNav = !hiddenNav', @toggle-aside-mobile='asideMobile = !asideMobile', :hidden-nav='hiddenNav', :mobile-aside='asideMobile')
  .frame
    navigation(:nav-hidden='hiddenNav', :mobile-aside='asideMobile')
    .frame__content

注意：我还根据 Vue 文档更新了道具和事件以使用 kebab case（参见 here 和 here）。

---

在您的header 组件中，我们需要

1. $emit点击按钮时的自定义事件
2. 将hiddenNav 和asideMobile 作为道具传递（用于:class 绑定）

<template lang="pug">
header.header
  .header__left(:class="{'hidden-aside': hiddenNav}")
    a.header__logo(href='')
      img(src='img/logo_smart.png', alt='')
    button.header__nav(@click="$emit('toggle-hidden-nav')")
      span
    button.header__nav.header__nav_mobile(@click="$emit('toggle-aside-moble')", :class="{'active': mobileAside}")
      span
</template>

<script>
export default {
  ...
  props: {
    hiddenNav: {
      type: Boolean,
      default: false
    },
    mobileAside: {
      type: Boolean,
      default: false
    }
  },
  ...
}
</script>

最后，我还要修复 nav 组件中的类绑定：

<template lang="pug">
   .frame__aside( :class="{'hidden-aside': navHidden, 'active': mobileAside }")
</template>