【发布时间】：2019-02-05 19:40:54
【问题描述】：
我正在努力学习 Vue.js 作品，阅读大量文档和教程，并参加了一些复数课程。我有一个非常基本的网站 UI 正在运行。这是 App.vue（我将其用作母版页）。
（为了让阅读更轻松、更快捷，请查看以下评论：This is the part you should pay attention to）...
<template>
<div id="app">
<div>
<div>
<CommandBar />
</div>
<div>
<Navigation />
</div>
</div>
<div id="lowerContent">
<!-- This is the part you should pay attention to -->
<template v-if="showLeftContent">
<div id="leftPane">
<div id="leftContent">
<router-view name="LeftSideBar"></router-view>
</div>
</div>
</template>
<!-- // This is the part you should pay attention to -->
<div id="mainPane">
<div id="mainContent">
<router-view name="MainContent"></router-view>
</div>
</div>
</div>
</div>
</template>
然后在同一个 App.vue 文件中，这是脚本部分
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import CommandBar from './components/CommandBar.vue';
import Navigation from './components/Navigation.vue';
@Component({
components: {
CommandBar,
Navigation,
}
})
export default class App extends Vue {
data() {
return {
showLeftContent: true // <--- This is the part you should pay attention to
}
}
}
</script>
好的，我的想法是，我想在某些页面上显示左侧边栏，但在其他页面上我不想。这就是为什么那个 div 被包裹在 <template v-if="showLeftContent"> 中的原因。
然后使用命名为<router-view>'s，我可以控制将哪些组件加载到`router\index.ts\ 文件中。路线如下所示：
{
path: '/home',
name: 'Home',
components: {
default: Home,
MainContent: Home, // load the Home compliment the main content
LeftSideBar: UserSearch // load the UserSearch component in the left side bar area
}
},
到目前为止一切顺利！但这是踢球者。有些页面没有左侧栏，在这些页面上，我想将 showLeftContent 从 true 更改为 false。那是我想不通的部分。
假设我们有一个看起来像这样的“Notes”组件。
<template>
<div class="notes">
Notes
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class Notes extends Vue {
data() {
return {
showLeftContent: false // DOES NOT WORK
}
}
}
</script>
显然，我在这里没有正确处理showLeftContent。我理解，data 中的属性似乎仅适用于该组件。我只是没有找到任何关于如何在 App 组件中设置数据属性，然后在通过router-view 加载子组件时在子组件中更改它的任何信息。
谢谢！
编辑：
我将 Notes 组件的脚本部分更改为：
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class Notes extends Vue {
data() {
return {
showLeftContent: false // DOES NOT WORK
}
}
}
</script>
到：
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class Notes extends Vue {
mounted() {
this.$root.$data.showLeftContent = false;
}
}
</script>
虽然这不会导致任何编译或运行时错误，但它也没有达到预期的效果。在Notes 上，左侧栏仍然显示。
编辑 2：
如果我在 Notes 组件的脚本部分添加警报：
export default class Notes extends Vue {
mounted() {
alert(this.$root.$data.showLeftContent);
//this.$root.$data.showLeftContent = false;
}
}
在我单击导航中的“备注”之前，警报不会弹出。但是，该值是“未定义”。
编辑 3：
在语法上苦苦挣扎（记住这是 TypeScript，我不太了解！！）
编辑 4：
慢慢来！
export default class App extends Vue {
data() {
return {
showLeftContent: true
}
}
leftContent(value: boolean) {
alert('clicked');
this.$root.$emit('left-content', value);
}
}
这不会导致任何错误，但它也不起作用。该事件永远不会被触发。我将尝试将其放入 Navigation 组件中，看看是否可行。
【问题讨论】：
-
你确定 Notes 组件已经挂载了吗？可能会添加一个
console.log以仔细检查它。 -
@Sphinx，见编辑 2
-
如果值为'undefined'，可能是App不是根实例造成的。通过
console.log(this.$root.$el)仔细检查。 -
大声笑，我也不知道打字稿（对于编辑 3）。添加了 typescript 标签。
-
this.$root.$emit('left-content', value);应该在想要隐藏/显示侧面板的组件上调用。而你没有定义this.$on
标签： javascript typescript vue.js vue-component