Vue 『全局组件』 和 『局部组件』

全局组件

调用Vue.component()注册组件时,组件的注册是全局的

这意味着该组件可以在任意Vue示例下使用。

let cpnC = Vue.extend({
            template: `
            <h2>全局组件</h2>
            `
        })
        Vue.component('my-cpn1', cpnC);
        let app1 = new Vue({
            el: '#app1',
        })

局部组件

如果注册的组件是挂载在某个实例中, 那么就是一个局部组件

let cpnC2 = Vue.extend({
            template: `
            <h2>局部组件</h2>
            `
        })
        let app1 = new Vue({
            el: '#app1',
            components: {
                cpn2: cpnC2
            }
        })

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app1">
        <my-cpn1></my-cpn1>
        <cpn2></cpn2>
    </div>
    <div id="app2">
        <my-cpn1></my-cpn1>

    </div>
    <script>
        let cpnC = Vue.extend({
            template: `
            <h2>全局组件</h2>
            `
        })
        Vue.component('my-cpn1', cpnC);
        let cpnC2 = Vue.extend({
            template: `
            <h2>局部组件</h2>
            `
        })
        let app1 = new Vue({
            el: '#app1',
            components: {
                cpn2: cpnC2
            }
        })
        let app2 = new Vue({
            el: '#app2',
        })
    </script>
</body>

</html>
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 鲸 设计师:meimeiellie 返回首页