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

Question

我有一个组件 ( prism-editor)，它只从 中获取代码v-model="code"。这意味着，代码必须通过以下方式发送到组件code：

\n

代码.vue

\n

<template>\n  <prism-editor class="my-editor" v-model="code" \n    :highlight="highlighter" :line-numbers="numbers"/>\n</template>\n\n<script>  \n  import { PrismEditor } from 'vue-prism-editor';\n\n  export default {\n    components: {\n      PrismEditor,\n    },\n    data: () => ({\n        code: this.$slots,\n        numbers: true\n    }),\n  }\n</script>\n

\n

我想从一个Code由插槽命名的父组件绑定它：

\n

页面.vue

\n

<template>\n    <code language="c">\n        int main() {\n            printf('Hello World!');\n        }\n    </code>\n<template>\n\n<script>\n  import Code from 'code.vue'\n  export default {\n    components: {\n      'code': Code\n    }\n  }\n</script>\n

\n

在我的Code组件中，我必须找到一种方法来获取槽数据并将其直接传递到code要发送到v-model='code'. 不幸的是，以下内容不起作用，因为我不知道如何从父级获取数据slot：

\n

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

\n

换句话说，我只想获取标签内发送的所有原始内容code：

\n

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

\n

这可能吗？

\n

.\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 Code.vue\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 Page.vue\n

\n

Answer 1

很好的问题，为了解决这个问题，您必须进入 Vuejs 下面的一层，并使用textContentDOM 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 解决它。快乐的编码伙伴；