在Vue中获取广告位数据作为变量？ Code.vue Page.vue

问题描述

我有一个组件（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

解决方法

一个很好的问题，为了解决这个问题，您必须在Vuejs之下一层，并使用DOM API [read more here]中的属性textContent

使用此属性，您可以访问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解决它。快乐的编码伙伴；