如何解决在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>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解决它。快乐的编码伙伴;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。