Vue.js Vue组件包装

在维护子组件的所有功能的同时，用另一个组件包装组件的正确方法是什么

我需要用一个容器包装我的组件，保留子组件的所有功能，并在单击子组件外部的容器时添加一个触发器，该容器将触发子组件的onclick事件

父组件应该发出所有子组件事件，接受子组件接受的所有道具并传递它们，父组件所做的只是添加一个可单击的包装器

---

在某种程度上，我在问如何在vue中扩展组件…

它被称为透明包装器

通常是这样做的：

<template>
  <div class="custom-textarea">
    <!-- Wrapped component: -->
    <textarea
      :value="value"
      v-on="listeners"
      :rows="rows"
      v-bind="attrs"
      >
    </textarea>
  </div>
</template>

<script>
export default {
  props: ['value'],  # any props you want
  inheritAttrs: false,
  computed: {
    listeners() {
      # input event has a special treatment in this example:
      const { input, ...listeners } = this.$listeners;
      return listeners;
    },
    rows() {
      return this.$attrs.rows || 3;
    },
    attrs() {
      # :rows property has a special treatment in this example:
      const { rows, ...attrs } = this.$attrs;
      return attrs;
    },
  },
  methods: {
    input(event) {
      # You can handle any events here, not just input:
      this.$emit('input', event.target.value);
    },
  }
}
</script>

导出默认值{
道具：['value']，#任何你想要的道具
继承属性：false，
计算：{
听众（）{
#在本例中，输入事件有特殊处理：
const{input，…listeners}=this.$listeners；
返回听众；
},
行（）{
返回此。$attrs.rows | | 3；
},
attrs（）{
#：rows属性在此示例中有特殊处理：
const{rows，…attrs}=这个。$attrs；
返回属性；
},
},
方法：{
输入（事件）{
#您可以在此处处理任何事件，而不仅仅是输入：
这是.emit（'input'，event.target.value）；
},
}
}

资料来源：