在 vue js 中通过 router-view 更新组件中的 props

Question

我想将布尔值从我在路由器视图中的一个视图传递到根 App.vue，然后传递到 App.vue 中的组件之一。我能够做到，但我遇到了一个错误：

避免直接修改 prop，因为只要父组件重新渲染，该值就会被覆盖。相反，根据道具的价值使用数据或计算属性。正在改变的道具：“抽屉”

下面是我的代码：

Home.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>

我通过在导航栏组件中绑定它来发送抽屉的值。

Navbar.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 的工作方式，道具仅用于将数据从父级向下传递给子级（App.vue 是父级，Navbar.vue 是子级），而不是相反。

此处正确的方法是：每次在 Navbar.vue 中，如果您想更改“抽屉”的值，您应该像在 Home.vue 中一样发出一个事件。

然后您可以在 App.vue 中监听该事件并相应地更改抽屉变量。

示例：

Navbar.vue

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

App.vue

<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 中抽屉道具的变化，例如：

<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>

Home.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>

App.vue

<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>

这不会改变抽屉道具，但会响应变化。

在 vue js 中通过 router-view 更新组件中的 props

Update props in component through router-view in vue js

javascript

vue.js

vuejs2

vuetify.js

vue-props