Получить данные слота как переменную во Vue?

Question

У меня есть компонент (prism-editor), который берет код только из v-model="code". Это означает, что код должен быть отправлен компоненту черезcode:

Code.vue

<template>
  <prism-editor class="my-editor" v-model="code" 
    :highlight="highlighter" :line-numbers="numbers"/>
</template>

<script>  
  import { PrismEditor } from 'vue-prism-editor';

  export default {
    components: {
      PrismEditor,
    },
    data: () => ({
        code: this.$slots,
        numbers: true
    }),
  }
</script>

Я хотел бы связать это с родительским компонентом с именем Code из слота:

Page.vue

<template>
    <code language="c">
        int main() {
            printf('Hello World!');
        }
    </code>
<template>

<script>
  import Code from 'code.vue'
  export default {
    components: {
      'code': Code
    }
  }
</script>

В моем Code компонент, мне нужно найти способ получить и передать данные слота непосредственно в code переменная для отправки в v-model='code'. К сожалению, следующее не работает, потому что я не знаю, как получить данные от родителя.slot:

data: () => ({
    code: this.$slots // Which obviously doesn't work...
})

Другими словами, я просто хочу получить весь необработанный контент, который был отправлен в code тег:

<code>all this content...</code>`

Это возможно?

.
├── Code.vue
└── Page.vue

Answer 1

Отличный вопрос, чтобы решить эту проблему, вам нужно будет перейти на уровень ниже Vuejs и использовать свойство textContentиз DOM API[подробнее здесь]

С помощью этого свойства вы можете получить доступ к содержимому внутри элемента DOM, поэтому в вашем случае это будет примерно так:

/*
 * Template
 */
<div ref="mySlot">
  <slot></slot>
</div>

/*
 * Javascript
 */
this.$refs.mySlot.textContent;

Я установил для вас хороший пример в Codesandbox:

https://codesandbox.io/s/gallant-resonance-7unn2?file=/src/components/Code.vue

Для будущих задач:

Всегда пытайтесь решить, сможете ли вы решить эту проблему с помощью чистого Javascript. Счастливый товарищ по кодированию;