将 props 从布局传递到组件

Question

所以我对 vue 还很陌生，我的 googlefu 可能还不够好，但我想做的是从布局 => 全局组件传递道具。这是可能的吗？我目前正在玩，并有一个这样定义的默认布局

布局/default.vue

<template>
  <div>
    <SiteNav/>
    <nuxt class="nuxt-container"/>
  </div>
</template>

<script>
import SiteNav from "../components/SiteNav"

export default {
  test: "corgi",
  components: {
    SiteNav
  }
}
</script>

组件/SiteNav.vue

<template>
  <div>
    <nuxt-link to="/sign-in">Click to Sign In</nuxt-link>
    <nuxt-link to="/second-page">Click to Second Page</nuxt-link>
  </div>
</template>

export default {
  props: {
    test: {
      type: String,
      required: false,
      default: ""
    }
  },
  created() {
    this.$parent.$emit("update:layout", this.test)
  },
  render() {
    return this.$slots.default[0]
  }
}
</script>

我已经能够创建多个都使用这个全局组件的页面，但是我无法成功地将 props 从布局传递到全局组件。有什么办法吗？

Answer 1

好的，这个不错。在 nuxt 中，您实际上可以在非父/子组件之间进行通信，并且您可以使用它与布局中的另一个组件或布局本身从布局中包含的任何内容进行通信。

在您的组件中，您可以发出任何您想要的内容，因此它可以是 @click 或任何方法，但在您的情况下，您可能希望将其放在 mounted() 而不是 created() 中，否则会导致错误，因为事件的生命周期。所以：

//Component.Vue

<template>
  <div>All your lovely stuff</div>
</template>

<script>
export default {
  mounted() {
      this.$nuxt.$emit('test', 'blah');
  }
}
</script>

然后在你的布局中监听发出的事件，你监听它是这样创建的。

//default.vue

created() {
    this.$nuxt.$on('test', data => {
      console.log(data+' emitted')
      })
    },

当组件被挂载时，您的控制台将记录“发出的废话”。

你也应该像这样关闭监听：

beforeDestroy() {
      // $off method will turn off the event listner
      this.$nuxt.$off('test');
  },

Answer 2

由于<SiteNav/> 在 default.vue 中，您可以像这样简单地监听事件：

<SiteNav @update:layout="updateLayout" />

然后你定义一个updateLayout 方法，它的第一个参数将是你发出的任何内容：

this.$emit('update:layout', this.test);

请注意，您不能在 $parent 对象上发出（这使得跟踪事件的来源变得更加困难）。