通過vue js中的router-view更新組件中的props

Question

我想將一個布爾值從路由器視圖中的一個視圖傳遞到根 App.vue，然后傳遞到 App.vue 中的組件之一。 我能夠做到，但我面臨一個錯誤：

避免直接改變 prop，因為每當父組件重新渲染時，值都會被覆蓋。 相反，根據道具的值使用數據或計算屬性。 道具被變異：“抽屜”

下面是我的代碼：

主頁.vue：

<template>
  <div class="home"  v-on:click="updateDrawer">
    <img src="...">
  </div>
</template>
<script>
export default {
name: "Home",
methods:{
updateDrawer:function(){
  this.$emit('updateDrawer', true)
}
};
</script>

上面的視圖在路由器視圖中，我在下面的 App.vue 中得到了值：

<template>
<v-app class="">
<Navbar v-bind:drawer="drawer" />
<v-main class=" main-bg">
  <main class="">
    <router-view v-on:updateDrawer="changeDrawer($event)"></router-view>
  </main>
</v-main>
</v-app>
</template>

<script>
import Navbar from '@/components/Navbar'

export default {
name: 'App',
components: {Navbar},

data() {
return {
  drawer: false
}
},
methods:{
changeDrawer:function(drawz){
  this.drawer = drawz;
}
},
};
</script>

我通過在導航欄組件中綁定它來發送抽屜的值。

導航欄.vue：

<template>
<nav>
<v-app-bar app fixed class="white">
  <v-app-bar-nav-icon
    class="black--text"
    @click="drawer = !drawer"
  ></v-app-bar-nav-icon>
  </v-app-bar>
  <v-navigation-drawer
  temporary
  v-model="drawer"
  >
   ...
 </v-navigation-drawer>
</nav>
</template>
<script>
export default {
props:{
drawer:{
  type: Boolean
}
},
};
</script>

這將工作一次，然后它會給我上述錯誤。 如果有人可以解釋我應該做什么以及如何解決此問題，我將不勝感激。

Answer 1

在 Navbar.vue 中，您正在獲取屬性“抽屜”，每當有人點擊“v-app-bar-nav-icon”時，您將抽屜更改為 !drawer。

這里的問題是您正在從子端（Navbar.vue 是子項）改變（更改值）屬性。 這不是 Vue 的工作方式，props 僅用於將數據從父級傳遞到子級（App.vue 是父級，Navbar.vue 是子級），而不是相反。

正確的方法是：每次在 Navbar.vue 中，您想要更改“抽屜”的值時，您都應該像在 Home.vue 中一樣發出一個事件。

然后您可以在 App.vue 中監聽該事件並相應地更改抽屜變量。

例子：

導航欄.vue

<v-app-bar-nav-icon
    class="black--text"
    @click="$emit('changedrawer', !drawer)"
></v-app-bar-nav-icon>

應用程序

<Navbar v-bind:drawer="drawer" @changedrawer="changeDrawer"/>

我最初錯過了您還在 Navbar.vue 中使用 v-model="drawer" 的事實。 v-model 也改變了 drawer 的值，這也是我們不想要的。 我們可以通過將 v-model 拆分為 v-on:input 和 :value 來解決這個問題，如下所示：

<v-navigation-drawer
    temporary
    :value="drawer"
    @input="val => $emit('changedrawer', val)"
>

在這種情況下，某種中央狀態管理（例如 Vuex）也會很棒；）

Answer 2

你可以做的是觀察 Navbar.vue 中 drawer prop 的變化，如下所示：

<template>
  <nav>
    <v-app-bar app fixed class="white">
      <v-app-bar-nav-icon
        class="black--text"
        @click="switchDrawer"
      />
    </v-app-bar>
    <v-navigation-drawer
      temporary
      v-model="navbarDrawer"
    >
      ...
    </v-navigation-drawer>
  </nav>
</template>

<script>
export default {
  data () {
    return {
      navbarDrawer: false
    }
  },
  props: {
    drawer: {
      type: Boolean
    }
  },
  watch: {
    drawer (val) {
      this.navbarDrawer = val
    }
  },
  methods: {
    switchDrawer () {
      this.navbarDrawer = !this.navbarDrawer
    }
  }
}
</script>

主頁.vue

<template>
  <div class="home">
    <v-btn @click="updateDrawer">Updrate drawer</v-btn>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      homeDrawer: false
    }
  },
  methods: {
    updateDrawer: function () {
      this.homeDrawer = !this.homeDrawer
      this.$emit('updateDrawer', this.homeDrawer)
    }
  }
}
</script>

應用程序

<template>
  <v-app class="">
    <Navbar :drawer="drawer" />
    <v-main class="main-bg">
      <main class="">
        <router-view @updateDrawer="changeDrawer"></router-view>
      </main>
    </v-main>
  </v-app>
</template>

<script>
import Navbar from '@/components/Navbar'

export default {
  name: 'App',
  components: { Navbar },

  data () {
    return {
      drawer: false
    }
  },
  methods: {
    changeDrawer (newDrawer) {
      this.drawer = newDrawer
    }
  }
}
</script>

這不會改變抽屜道具，但會響應變化。