Vue компонент упаковки

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>

Источники:

• https://www.vuemastery.com/conferences/vueconf-us-2018/7-secret-patterns-vue-consultants-dont-want-you-to-know-chris-fritz/
• https://zendev.com/2018/05/31/transparent-wrapper-components-in-vue.html