如何将 html 模板作为道具传递给 Vue 组件

Question

我有一个textarea包含的组件，html tag我想html在这个组件中进入编辑模式。我Laravel用来生成html。

<template>

    <div>

        <textarea

                  :value="content"

                  :name="name"

                  :id="id">

              <slot></slot>

        </textarea>

    </div>

</template>

在刀片页面中，我习惯了这个组件：

<my-component>

   <p class="textbox">hello world</p>

</my-component>

当我将此组件放在页面中时，请<slot></slot>在 textarea 中显示标签。我应该怎么办？你有什么解决方案可以满足我的需求吗？

Answer 1

在您的情况下，如果您想编写自己的内容编辑器，您可以使用div属性 contenteditable="true" 而不是textarea。在此之后，您可以编写文本装饰方法......生成的带有 Laravel 的 html 存储在myhtml 中，并在 vue 组件中使用。例子：我也上传到codesandbox 【简单的Vue编辑器】<template>&nbsp; <div>&nbsp; &nbsp; <button @click="getEditorCotent">Get Content</button>&nbsp; &nbsp; <button @click="setBold">Bold</button>&nbsp; &nbsp; <button @click="setItalic">Italic</button>&nbsp; &nbsp; <button @click="setUnderline">Underline</button>&nbsp; &nbsp; <button @click="setContent">Clear</button>&nbsp; &nbsp; <div class="myeditor" ref="myeditor" contenteditable v-html="myhtml" @input="onInput"></div>&nbsp; </div></template><script>export default {&nbsp; name: "HelloWorld",&nbsp; props: {&nbsp; &nbsp; msg: String&nbsp; },&nbsp; data: () => {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; myhtml:&nbsp; &nbsp; &nbsp; &nbsp; "<h1>Simple editor</h1><p&nbsp; style='color:red'>in vue</p><p>Hello world</p>" // from laravel server via axios call&nbsp; &nbsp; };&nbsp; },&nbsp; methods: {&nbsp; &nbsp; onInput(e) {&nbsp; &nbsp; &nbsp; // handle user input&nbsp; &nbsp; &nbsp; // e.target.innerHTML&nbsp; &nbsp; },&nbsp; &nbsp; getEditorCotent() {&nbsp; &nbsp; &nbsp; console.log(this.$refs.myeditor.innerHTML);&nbsp; &nbsp; },&nbsp; &nbsp; setBold() {&nbsp; &nbsp; &nbsp; document.execCommand("bold");&nbsp; &nbsp; },&nbsp; &nbsp; setItalic() {&nbsp; &nbsp; &nbsp; document.execCommand("italic");&nbsp; &nbsp; },&nbsp; &nbsp; setUnderline() {&nbsp; &nbsp; &nbsp; document.execCommand("underline");&nbsp; &nbsp; },&nbsp; &nbsp; setContent() {&nbsp; &nbsp; &nbsp; // that way set your html content&nbsp; &nbsp; &nbsp; this.myhtml = "<b>You cleared the editor content</b>";&nbsp; &nbsp; }&nbsp; &nbsp; // PS. Good luck!&nbsp; }};</script><style scoped>.myeditor {&nbsp; /* text-align: left; */&nbsp; border: 2px solid gray;&nbsp; padding: 5px;&nbsp; margin: 20px;&nbsp; width: 100%;&nbsp; min-height: 50px;}</style>