vue动态加载不同的组件（分内部和外部组件）

<!DOCTYPE html>
<html>

<head>
    <title> hello world vue </title>
    <meta charset="utf-8" />
</head>

<body>
    <div id="app" v-cloak>
        <!-- 缺省挂载 currentView 变量指定的组件 -->
        <component :is="currentView"></component>
        <button @click="handleChangeView('A')">A</button>
        <button @click="handleChangeView('B')">B</button>
        <button @click="handleChangeView('C')">C</button>
        <button @click="handleChangeViewHome()">Home</button>
    </div>
</body>

</html>

<script src="jquery-3.1.1.js"></script>
<script src="vue.js"></script>


<script>
    $(document).ready(function() {

    });
</script>


<script>
    Vue.component('Home', {
        template: '<div> 外部组件 </div>',
        props: {},
        data: function() {
            return {}
        },
        methods: {}
    });

    var app = new Vue({
        el: '#app',
        data: {
            currentView: 'comA'
        },
        computed: {},
        methods: {
            handleChangeView: function(x) {
                this.currentView = 'com' + x;
            },
            handleChangeViewHome: function() {
                this.currentView = 'Home';
            }
        },
        components: {
            comA: {
                template: '<div>组件A</div>'
            },
            comB: {
                template: '<div>组件B</div>'
            },
            comC: {
                template: '<div>组件C</div>'
            }
        },
        mounted: function() {}
    });
</script>
posted on 2019-09-07 17:28 qqhfeng16 阅读(2859) 评论(0) 编辑收藏举报