Vue Component 组件动态加载

2022-09-27  本文已影响0人  寻找无名的特质

如果我们希望Vue Component的Html部分可以动态调入,可以使用动态组件技术,组件的定义如下:

Vue.component('iframebuttonnew', function (resolve, reject) {

    axios.get("/js/iframebuttontemplate.html").then(function (res) {
        var define = {

            props: ['options'],
            template: res.data,

            data: function () {
                return {
                    dialogVisible: false
                }
            },

            methods: {
                buttonClick() {
                    this.dialogVisible = true;
                    this.$emit('dialogopened');
                }
            },


        }
        resolve(define);
    })
})

需要注意的是,使用这种方法实现组件动态调用时,html模板的加载在组件的初始化之前,所以这时无法使用组件的参数,这时如何获取组件的参数是一个问题。

上一篇 下一篇

猜你喜欢

热点阅读