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

Posted 2023-02-22

【中文标题】在Vue中获取插槽数据作为变量？

【英文标题】：Get slot data as a variable in Vue?

【发布时间】：2020-12-05 03:40:14

【问题描述】：

我有一个组件 (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 的父组件中绑定它：

页面.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

【问题讨论】：

请详细说明组件结构

@BoussadjraBrahim 我已经编辑了我的问题，我不知道你需要什么信息。

我的意思是父组件和子组件以及它们的结构

@BoussadjraBrahim 我添加了更多信息，希望对您有所帮助

【参考方案1】：

好问题，为了解决你必须在 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 来解决它。快乐的编码伙伴；

【讨论】：

是否没有Vue 包装器可以在不破解$refs 的情况下获取此信息？

在哪种情况下，使用 $refs 是一种 hack？无论哪种方式，您都可以使用其他替代方法来访问元素，使用最适合您的应用程序的方法。

@nowox, $refs 正是这样：Vue 与模板实体交互的包装器，无论它们是 DOM 元素还是子组件（vue 实例）。这与黑客攻击完全相反。它的唯一目的是允许您（开发人员）与模板进行交互而无需黑客攻击。如果这个需求不存在，$refs 就不会被添加到 Vue 中。