[英]vue wrap another component, passing props and events
How can I write my component to wrap another vue component, while my wrapper component get some extra props?如何编写我的组件来包装另一个 vue 组件,而我的包装器组件可以获得一些额外的道具? My wrapper template component should be:
我的包装模板组件应该是:
<wrapper-component>
<v-table></v-table> <!-- pass to v-table all the props beside prop1 and prop2 -->
</wrapper-component>
and the wrapper props:和包装道具:
props: {
prop1: String,
prop2: String
}
Here I want to wrap a table component, and pass to the table component all the props and events that were passed to the wrapper, beside two extra props prop1
and prop2
.在这里,我想包装一个表格组件,并将传递给包装器的所有道具和事件传递给表格组件,除了两个额外的道具
prop1
和prop2
。 What is the correct way of doing this in vue?在 vue 中这样做的正确方法是什么? And is there a solution for events too?
事件也有解决方案吗?
Place the component you wish to wrap into the template of the wrapper component, add v-bind="$attrs" v-on="$listeners"
to that component tag, then add the inner component (and, optionally, inheritAttrs: false
) to the wrapper component's config object.将要包装的组件放入包装器组件的模板中,将
v-bind="$attrs" v-on="$listeners"
添加到该组件标签,然后添加内部组件(并且,可选地, inheritAttrs: false
) 到包装器组件的配置对象。
Vue's documentation doesn't seem to cover this in a guide or anything, but docs for $attrs , $listeners , and inheritAttrs can be found in Vue's API documentation . Vue 的文档似乎没有在指南或其他任何内容中涵盖这一点,但可以在Vue 的 API 文档中找到$attrs 、 $listeners和inheritAttrs的文档。 Also, a term that may help you when searching for this topic in the future is " Higher-Order Component " (HOC) - which is basically the same as your use of "wrapper component".
此外,在将来搜索此主题时可能会对您有所帮助的术语是“高阶组件”(HOC) - 这与您对“包装器组件”的使用基本相同。 (This term is how I originally found $attrs)
(这个术语是我最初发现 $attrs 的方式)
For example...例如...
<!-- WrapperComponent.vue -->
<template>
<div class="wrapper-component">
<v-table v-bind="$attrs" v-on="$listeners"></v-table>
</div>
</template>
<script>
import Table from './BaseTable'
export default {
components: { 'v-table': Table },
inheritAttrs: false // optional
}
</script>
Edit : Alternatively, you may want to use dynamic components via the is
attribute so you can pass in the component to be wrapped as a prop (closer to the higher-order component idea) instead of it always being the same inner component.编辑:或者,您可能希望通过
is
属性使用动态组件,以便您可以将要包装的组件作为道具传递(更接近高阶组件的想法),而不是始终是相同的内部组件。 For example:例如:
<!-- WrapperComponent.vue -->
<template>
<div class="wrapper-component">
<component :is="wraps" v-bind="$attrs" v-on="$listeners"></component>
</div>
</template>
<script>
export default {
inheritAttrs: false, // optional
props: ['wraps']
}
</script>
Edit 2 : The part of OP's original question that I missed was passing all props EXCEPT one or two.编辑 2 :我错过的 OP 原始问题的一部分是通过除了一两个道具之外的所有道具。 This is handled by explicitly defining the prop on the wrapper.
这是通过显式定义包装器上的道具来处理的。 To quote the documentation for
$attrs
:引用
$attrs
的文档:
Contains parent-scope attribute bindings (except for class and style) that are not recognized (and extracted) as props
包含不被识别(和提取)为道具的父范围属性绑定(类和样式除外)
For example, example1
is recognized and extracted as a prop in the snippet below, so it doesn't get included as part of the $attrs
being passed down.例如,
example1
在下面的代码片段中被识别并提取为道具,因此它不会被包含在传递的$attrs
中。
Vue.component('wrapper-component', { template: ` <div class="wrapper-component"> <component :is="wraps" v-bind="$attrs" v-on="$listeners"></component> </div> `, // NOTE: "example1" is explicitly defined on wrapper, not passed down to nested component via $attrs props: ['wraps', 'example1'] }) Vue.component('posts', { template: ` <div> <div>Posts component</div> <div v-text="example1"></div> <div v-text="example2"></div> <div v-text="example3"></div> </div> `, props: ['example1', 'example2', 'example3'], }) new Vue({ el: '#app', template: ` <wrapper-component wraps="posts" example1="example1" example2="example2" example3="example3" ></wrapper-component> `, })
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.