如何将 vmodel 属性传递给 nuxjs 中的子组件

John 发表于 Dev

约翰

我似乎无法将动态修改的属性从布局传递到<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 次，一次在输入中，一次在 span 中，一次在 Nuxt 组件中。但是当我编辑输入字段时，只会更新跨度。Nuxt 组件不会捕获myprop. Nuxt 组件仅hello galaxy在输入时继续显示，跨度在我在键盘上键入时显示更改

我究竟做错了什么？

布萨扎布拉欣

提供/注入对于简单的情况很有用，但如果你有一些反应性的东西，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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。