Vue包装了另一个组件，传递了道具和事件 [英] vue wrap another component, passing props and events

问题描述

我如何编写我的组件来包装另一个vue组件，而我的包装器组件又得到了一些额外的道具?我的包装器模板组件应为:

How can I write my component to wrap another vue component, while my wrapper component get some extra props? 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>

和包装道具:

props: {
  prop1: String,
  prop2: String
}

这里我想包装一个表组件，并将传递给包装器的所有道具和事件传递给表组件，除了两个额外的道具 prop1 和 prop2 .在vue中执行此操作的正确方法是什么?还有事件的解决方案吗?

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. What is the correct way of doing this in vue? And is there a solution for events too?

推荐答案

将要包装的组件放入包装器组件的模板中，添加 v-bind ="$ attrs" v-on ="$侦听器" 到该组件标签，然后将内部组件(以及可选的 inheritAttrs:false )添加到包装器组件的config对象.

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.

Vue的文档似乎未在指南中或其他内容中涵盖，但 $的文档attrs ， $ listeners 和高级组件"(HOC)-与包装器组件"的用法基本相同.(这是我最初发现$ attrs的方式)

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. 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". (This term is how I originally found $attrs)

例如...

<!-- 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>

编辑:或者，您可能希望使用动态组件通过 is 属性可以传入要包装的组件作为道具(更接近于高阶组件的概念)，而不是始终是同一内部组件.例如:

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. 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>

编辑2 :我错过的OP原始问题部分是传递所有道具(除了一两个之外).这可以通过在包装器上显式定义prop来处理.引用 $ attrs 的文档:

Edit 2: The part of OP's original question that I missed was passing all props EXCEPT one or two. This is handled by explicitly defining the prop on the wrapper. To quote the documentation for $attrs:

包含无法识别为道具的父级属性绑定(类和样式除外)

Contains parent-scope attribute bindings (except for class and style) that are not recognized (and extracted) as props

例如， example1 被识别并提取为以下代码段中的prop，因此不会作为传递给 $ attrs 的一部分而包含在其中.

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.

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>

这篇关于Vue包装了另一个组件，传递了道具和事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！