javascript - 在Vue中获取插槽数据作为变量？

Question

我有一个组件( prism-editor )，它只从 v-model="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 的父组件绑定(bind)它从一个插槽:
页面.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 [read more here]
使用此属性，您可以访问 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
对于 future 的挑战:
总是尝试看看你是否可以用纯 Javascript 来解决它。快乐的编码伙伴；