Question

我有一个名为App.vue的主要组件，它包含一些html div元素和一个路由器视图。形成一个分配给路径的组件，我想在App.vue中显示/隐藏一个div（如果在子组件中单击一个按钮，在父组件中显示一个div，为另一个按钮显示另一个div，.etc）。我尝试将prop传递给router-view并更新prop prom child，但它显示错误。我怎么能这样做？

Answer 1

请参阅官方指南中的这些部分以找到答案：

https://vuejs.org/v2/guide/components.html#Composing-Components https://vuejs.org/v2/guide/components.html#One-Way-Data-Flow

Answer 2

您可以在router-view标记中收听活动并采取相应措施：

＆＃13;

const child = {
  template: `<div style="margin-bottom:100px">
     <button @click="$emit('clicked')">Toggle div</button>
  </div>`
}

const router = new VueRouter({
  routes: [ { path: '/child', component: child } ]
})

new Vue({
  router,
  el: '#app',
  data: { displayMe: 'block' },
  methods: {
    toggleMe: function() {
      this.displayMe = (this.displayMe === 'block') ? 'none' : 'block';
    }
  }
})

＆＃13;

#hideme {
  width: 100px;
  height: 100px;
  background: orange
}

＆＃13;

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <div>
    <div id="hideme" :style="{display: displayMe}"></div>
  </div>
  <router-link to="/child">Visit child</router-link>
  <router-view @clicked="toggleMe()"></router-view>
</div>

＆＃13;

对于多个divs，您可以使用事件传递一些数据，并在处理函数的$event参数中接收它（例如：toggleMe($event)），并单独解析样式属性。例如，您可以使用ref属性跟踪每个div，并使用data之类的结构在{ '1': 'block', ...}对象中保存状态，并使用方法检索样式。

在vue.js中更改父组件与子组件

2 个答案: