vue動態加載不同的組件（分內部和外部組件）

本文轉載自查看原文 2019-09-07 17:28 916 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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue動態加載組件 vue -- 動態加載組件 vue動態加載組件 vue組件內部引入外部js文件 Vue動態加載異步組件 Vue加載組件、動態加載組件的幾種方式 vue實踐---vue動態加載組件 Vue加載組件、動態加載組件的幾種方式 vue 循環加載動態組件以及傳值 Vue -- 動態加載組件的四種方式