vue -全局组件和局部组件

1、全局组件：Vue.component('标签名', 构造器名) 

Vue.component('mycpn', cpnC)

注：这种注册组件的方式是全局组件，可以在多个Vue实例中使用。

2、局部组件：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>

注：实际开发中，只有一个Vue实例，常用的组件是局部组件

 

posted @ 2019-10-29 16:58  个人升级打怪  阅读(373)  评论(0)  编辑  收藏  举报