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>

vue -全局组件和局部组件

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

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

二、局部组件：components:{标签名,构造器名}

注：这种注册组件的方式是局部组件，只能在注册这个组件的Vue实例中使用。

*******完整代码******‘

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

*完整代码‘