将 props 从布局传递到组件 [英] Passing props from layout to component
问题描述
所以我对 vue 还很陌生，我的 googlefu 可能还不够好，但我想要做的是从 layout => 全局组件传递道具.这是可能的吗?我目前正在玩，并定义了一个默认布局
布局/default.vue
<div><站点导航/><nuxt class="nuxt-container"/><脚本>从../components/SiteNav"导入 SiteNav导出默认{测试:柯基犬"，组件: {网站导航}}
组件/SiteNav.vue
<div><nuxt-link to="/sign-in">点击登录</nuxt-link><nuxt-link to="/second-page">点击第二页</nuxt-link>导出默认{道具: {测试: {类型:字符串，要求:假，默认: ""}},创建(){this.$parent.$emit("update:layout", this.test)},使成为() {返回 this.$slots.default[0]}}
我已经能够创建多个页面，所有页面都使用这个全局组件，但我无法成功地将 props 从布局传递到全局组件.有办法吗?
好的，这是一个很好的方案.在 nuxt 中，您实际上可以在非父/子组件之间进行通信，并且您可以使用它与布局中的另一个组件或布局本身从布局中包含的任何内容进行通信.
在你的组件中，你可以发出任何你想要的东西，所以它可以是一个@click 或任何方法，但在你的情况下，你想把它放在 mounted() 而不是 created() 否则会因为事件的生命周期而导致错误.所以:
//Component.Vue<模板><div>你所有可爱的东西</div><脚本>导出默认{安装(){this.$nuxt.$emit('test', 'blah');}}然后要在您的布局中监听发出的事件，您可以像这样创建.
//default.vue创建(){this.$nuxt.$on('test', data => {console.log(数据+'发出')})},当组件被挂载时，你的控制台将记录发出的废话".
你也应该像这样关闭监听:
beforeDestroy() {//$off 方法将关闭事件监听器this.$nuxt.$off('test');},So I'm fairly new to vue and my googlefu may not be good enough, but what I am trying to do is pass props from layout => global component. Is this something that's possible? I'm currently playing around and have a default layout defined as such
layouts/default.vue
<template>
<div>
<SiteNav/>
<nuxt class="nuxt-container"/>
</div>
</template>
<script>
import SiteNav from "../components/SiteNav"
export default {
test: "corgi",
components: {
SiteNav
}
}
</script>
components/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>
I've been able to create multiple pages that all uses this global component but I haven't been able to successfully pass props from the layout to the global component. Is there a way?
Ok, this is a good one. In nuxt you can actually communicate between non parent/child components and you can use that to communicate to another component in the layout or the layout itself from anything contained in the layout.
In your component you emit whatever you want, so it could be an @click or any method, but in your case you would want to put it inside mounted() rather than created() otherwise it will cause an error because of the life cycle of events. So:
//Component.Vue
<template>
<div>All your lovely stuff</div>
</template>
<script>
export default {
mounted() {
this.$nuxt.$emit('test', 'blah');
}
}
</script>
Then to listen to the emitted event in your layout you listen for it in created like this.
//default.vue
created() {
this.$nuxt.$on('test', data => {
console.log(data+' emitted')
})
},
and your console will log 'blah emitted' when the component is mounted.
You should also turn the listening off like this:
beforeDestroy() {
// $off method will turn off the event listner
this.$nuxt.$off('test');
},
这篇关于将 props 从布局传递到组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
