搜索

+

104

-

vue如何动态加载远程的子组件js运行显示？

html5 javascript vue

vue如何动态加载远程的子组件js运行显示？

网友回复

+

2

-

我们以cdn版本的vue写一个示例：

800_auto

子组件remote-component.js

// remote-component.js
({  // 注意这里要用括号包裹对象
    name: 'remote-component',
    template: `
        <div>
            <h1>{{ title }}</h1>
            <button @click="onClick">点击</button>
        </div>
    `,
    data: function() {  // Vue2 中 data 必须是函数
        return {
            title: '远程组件'
        }
    },
    methods: {
        onClick() {
            alert('按钮被点击');
        }
    }
})

远程调用子组件的页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
   <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script>
</head>
<body>
   <div id="app">
        <remote-component-loader :url="componentUrl"></remote-component-loader>
    </div>

    <script>
        // 组件加载器实现
        Vue.component('remote-component-loader', {
            template: `
                <div>
                    <component 
                        v-if="componentData"...

点击查看剩余70%

by 钱端世界

我知道答案，我要回答

我有问题

最新提问