将 props 从布局传递到组件

Posted 2023-02-23

【中文标题】将 props 从布局传递到组件

【英文标题】：Passing props from layout to component

【发布时间】：2019-08-07 12:15:14

【问题描述】：

所以我对 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 从布局传递到全局组件。有什么办法吗？

【参考方案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');
  ,

【讨论】：

有趣！所以我要做的流程是：login-page.vue => 向组件发送一条信息进行更新。在这个例子中，我看到我确实可以在我的布局中从组件安装后以及从我测试它的登录页面中收听发出的事件。就像现在一样，我相信该组件永远不会更新。我需要做的就是将侦听器添加到组件并从登录页面调用它吗？

优秀。这是一个非常方便的功能。

应该beforeDestroy 在default.vue 或Component.Vue 中吗？

@abedelhak.ajbouni，你把 beforeDestroy 放在 default.vue 中。当你打开它时，它会在 default.vue 中创建一个监听器，所以你在你创建它的地方关闭它。

【参考方案2】：

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

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

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

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

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

【讨论】：

所以澄清一下，updateLayout 方法应该位于 default.vue 中用于设置 prop，并且 this.$emit 放在要更改 prop 的任何位置？

default.vue 包含 updateLayout，因为这是您使用指令 @update:layout="updateLayout" 的地方。当您使用$emit 时，您允许使用您的组件的其他组件使用@event 语法监听该事件

对，所以我测试了它，创建的方法似乎永远不会被调用。 “属性或方法“updateLayout”未在实例上定义，但在渲染期间被引用。”我尝试从几个不同的区域调用，defaultVue 内部的方法似乎从未被触发。

您必须在methods 键中定义您的方法，参见v1.vuejs.org/guide/events.html

好的，太棒了。组件能够成功发出事件并且布局接收到它。您是否会碰巧知道使用该布局的页面是否能够通过道具？我尝试在页面中使用相同的 $emit 语句并从那里传入一个变量，但这似乎不起作用。