vue.js - 如何将 vmodel 属性传递给 nuxjs 中的子组件

Question

我似乎无法将动态修改的属性从布局传递到<Nuxt />组件中。

这是我的~/layouts/default.vue

<template>
<div>
    <input v-model="myprop" />
    <span>{{myprop}}</span>
    <Nuxt />
    </div>
</template>

<script>
export default {

  provide: function () {
    return {myprop: this.myprop};
  },

  data: () => ({
    myprop: 'hello galaxy',
  }),
}
</script>

这是我的~/pages/index.vue

<template>
  <div>My Prop is: {{myprop}}</div>
</template>

<script>
export default {
  inject: ["myprop"]
}
</script>

在网页上，我看到hello galaxy打印了 3 次，一次在输入中，一次在跨度中，一次在 Nuxt 组件中。但是当我编辑输入字段时，只有跨度被更新。Nuxt 组件不会捕获myprop. Nuxt 组件仅在输入时继续显示hello galaxy，并且跨度显示更改时我在键盘上键入

我究竟做错了什么？

标签： vue.jsnuxt.js

Answer 1

提供/注入对于简单的情况很有用，但是如果你有一些反应性的东西，vuex 存储更方便：

在store/index.js

添加一个名为的状态search及其突变和动作：

export const state=()=>({
  search:''
})

export const mutations ={
  SET_SEARCH(state,payload){
      state.search=payload
  }
}

export const actions ={
   setSearch(context,payload){
        context.commit('SET_SEARCH',payload)   ​
  }
}

layout/default.vue添加绑定到存储的 setter/getter 的计算属性：

<template>
<div>
    <input v-model="search" />
    <span>{{search}}</span>
    <Nuxt />
    </div>
</template>

<script>
export default {

  computed:{
      search:{
        get(){
          return this.$store.state.search
        },
        set(val){
          this.$store.dispatch('setSearch',val)
        }
      }
   }
}
</script>

在pages/index.vue：

<template>
  <div>My search is: {{search}}</div>
</template>

<script>
export default {
  computed:{
   search(){
      return this.$store.state.search
    }
   }
}
</script>