VueJS:如何在contentEditable div中动态嵌入contentEditable组件

Question

如何在contentEditable div中动态嵌入emoji组件，同时在div中键入一些文本。

下面是我代码的摘录：

​

<picker set="emojione" @select="addEmoji" />
<div>
    {{ inputBoxValue }}
</div>

<script>
    export default {
        name: 'Some',
        components: {
            picker: Picker,
            emoji: Emoji,
        },
        data() {
            return {
                inputBoxValue: '',
            };
        },
        methods: {
            addEmoji() {
                this.inputBoxValue = ' <
                emoji emoji = "{ id: "
                heart_eyes ", skin: 2 }"
                set = "emojione"
                size = "16"
                tooltip = "true" / > ';
            }
        }
    }; 
<script>

​

Answer 1

您在这里错误地考虑了这个问题，而不是通过字符串将组件添加到dom中，您需要开始使用v-for和组件。例如，如果我们创建以下组件：

<div>
    {{emojiText}}
</div>

<script>
    export default {
       props: ['id', 'set', 'size', 'tooltip'],
        name: 'InnerEmojiHolder',
        data() {
            return {
                emojiText: '',
            };
        },
        methods: {

        },
        ready(){
         // put logic to build emoji here using props
        }
    }; 
<script>

然后，可以在现有组件中使用它，如下所示：

<picker set="emojione" @select="addEmoji" />
<div>
  <template :for="emoji, index in currentInput">
    <innerEmojiHolder :id="index" :set="emoji.set" :tooltip="emoji.tooltip" :size="emoji.size" : ></innerEmojiHolder>
  </template>
</div>

<script>
    export default {
        name: 'Some',
        components: {
            picker: Picker,
            emoji: Emoji,
            innerEmojiHolder: innerEmojiHolder,
        },
        data() {
            return {
                currentInput: []
            };
        },
        methods: {
            addEmoji() {
             // Push our emoji variables into currentInput
            }
        }
    }; 

​

这样我们就可以使用a for打印出所有的表情符号，并使用来自其子层中父级的数据。