vue -全局組件和局部組件

時間 2019-11-07

標籤 vue 全局組件局部简体版

原文原文鏈接

一、全局組件：Vue.component('標籤名', 構造器名)

Vue.component('mycpn', cpnC)

注：這種註冊組件的方式是全局組件，能夠在多個Vue實例中使用。

二、局部組件：components:{標籤名,構造器名}

components: {
                mycpn: cpnC
            }

注：這種註冊組件的方式是局部組件，只能在註冊這個組件的Vue實例中使用。

*完整代碼‘

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<div id="app">
    <mycpn />
</div>
<div id="app2">
    <mycpn />
</div>

<body>
    <script>
        const cpnC = Vue.extend({
            template: `
                <h2>全局組件，能夠在多個Vue實例中使用</h2>
            `
        })
        // Vue.component('mycpn', cpnC)
        //這種註冊組件的方式是全局組件，能夠在多個Vue實例中使用。

        let vm = new Vue({
            el: '#app',
            components: {
                mycpn: cpnC
            }
            //這種註冊組件的方式是局部組件，只能在註冊這個組件的Vue實例中使用。
        })
        let vm2 = new Vue({
            el: '#app2'
        })
    </script>
</body>

</html>