Захват html, обернутый компонентом, чтобы установить значение данных в vue.js

Question

Я работаю над компонентом на основе подсказки. Я хочу взять html, который находится внутри тегов компонента

<vue-wysiwyg>
    <p>Hey, this is some test text.</p>
    <p>I should end up in editor.content</p>
</vue-wysiwyg>

и получить данные editor.content для моего компонента.

export default {
  data() {
    return {
      editor: new Editor({
        content: '',
      }),
    }
  },
}

Я думал о слотах, но этопросто проходит через HTML, он не захватывает его.

Answer 1

Я думаю, что слоты - это путь, но так как они содержат объекты vdom, мы должны использовать vue, чтобы преобразовать его в html. Должно работать следующее:

computed: {
    html(){

        return new Vue({ 
                render: h => h('div', {}, this.$slots.default)
            })
            .$mount().$el.innerHTML
    } 
}

Мы создаем простой экземпляр компонента, который имеет только функцию рендеринга, а затем мы $mount создаем DOM, а затем извлекаем innerHTML из корневого элемента.

ПРИМЕЧАНИЕ. Вам нужно будет импортировать Vue в этот файл

Answer 2

Вы можете присвоить компоненту ref, получить доступ к его внутреннему HTML и присвоить ему editor.content

<vue-wysiwyg ref="wysiwyg">
    <p>Hey, this is some test text.</p>
    <p>I should end up in editor.content</p>
</vue-wysiwyg>

И затем в подключенном хуке жизненного цикла

export default {
  data() {
    return {
      editor: new Editor({
        content: '',
      }),
    }
  },
  mounted() {
    this.editor.content = this.$refs.wysiwyg.$el.innerHTML;
  }
}

Как эта песочница

Надеюсь, это поможет