Question

在保持子组件的所有功能的同时，将一个组件与另一个组件包装在一起的正确方法是什么。

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

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

以一种方式问我如何在vue中扩展组件...

Answer 1

它称为透明包装纸。

通常是这样的：

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

来源：

Vue组件包装

1 个答案: