Vue动态创建组件方法

组件写好之后有的时候需要动态创建组件。例如：

编辑文章页面，正文是一个富文本编辑器，富文本编辑器是一个第三方的组件，点击添加章节的时候需要动态的创建一个富文本编辑器这个时候怎么处理呢。

富文本编辑器也就是第三方的组件，需要绑定一个值就跟input一样，但是其他的和平常都是一样的，根据这个特点我们就可以使用Vue的for循环去动态创建例如

<div>
                    <quill-editor 
                        v-model="item.content"
                        style="min-height: 150px;background: #fff;"
                        v-for="item in items"
                        class="editer">
                    </quill-editor>
                </div>
                <div class="addClass_box">
                    <span @click="addTravel()">+&nbsp;新增章节</span>
                </div>

quill-editor 这个是个组件，直接循环出来就行，至于组件所绑定的值，循环出来绑定进去就行。

import { quillEditor } from 'vue-quill-editor'

    export default {
        name: 'travelAdd',
        components: {
            quillEditor
        },
        data () {
            return {
                items: [{
                    component: quillEditor,
                    content: ''
                }]
            }
        },
        computed: {
            // editor() {
            //     return this.$refs.myQuillEditor.quill
            // }
        },
        mounted(){
            
        },
        created () {

        },
        methods: {
            addTravel(){
                this.items.push({
                    component: quillEditor,
                    content: ''
                })
            }
        },
        mixins: [http]
    }

点击添加的时候把items这个数组扩张就行了。

转载于:https://www.cnblogs.com/haonanZhang/p/9871536.html