怎么注册才是局部组件,什么是全局组件

局部组件

局部组件直接挂载到Vue下面

上代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <cpn></cpn>
        <cpn></cpn>
        <cpn></cpn>
    </div>
    <!-- 此时下面的无法显示 -->
    <div id="app2">
        <cpn></cpn>
    </div>
    <script  src="../js/vue.js"></script>
    <script>
         // 1. 创建组件构造器对象
         const cpnC = Vue.extend({
            template: `
            <div>
                <h2>title</h2>
                <p>main one</p>
                <p>main two</p>
            </div>
            `
        })
        const app = new Vue({
            el: '#app',
            data: {
                message: 'hello'
            },
            components: {
                // cpn使用组件时的标签名
                cpn: cpnC
            }
        }) 

        const app2 = new Vue({
            el: '#app2'
        })
    </script>
</body>
</html> 
 

全局组件

全局组件用Vue.component('cpn', cpnC)进行注册

(全局组件, 意味着可以在多个Vue的实例下面使用)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <cpn></cpn>
        <cpn></cpn>
        <cpn></cpn>
    </div>
    <div id="app2">
        <cpn></cpn>
    </div>
    <script  src="../js/vue.js"></script>
    <script>
         // 1. 创建组件构造器对象
         const cpnC = Vue.extend({
            template: `
            <div>
                <h2>title</h2>
                <p>main one</p>
                <p>main two</p>
            </div>
            `
        })
        // 2.注册组件(全局组件, 意味着可以在多个Vue的实例下面使用)
        Vue.component('cpn', cpnC)
        const app = new Vue({
            el: '#app',
            data: {
                message: 'hello'
            }
        }) 

        const app2 = new Vue({
            el: '#app2'
        })
    </script>
</body>
</html> 
 

组件必须挂载在某个Vue实例下,否则它不会生效

组件语法糖注册方式

<body>
    <div id="app">
        <cpn1></cpn1>
        <cpn2></cpn2>
    </div>
    <script  src="../js/vue.js"></script>
    <script>
        // 1.全局组件注册的语法糖
        // 1.创建组件构造器
        // const cpn1 = Vue.extend()
        
        // 2.注册组件(全局组件形式)
        Vue.component('cpn1', {
            template: `
                <div>
                    <h2>title one</h2>
                    <p>content one</p>
                </div>
            `   
        })

        // 2.注册局部组件的语法糖
        const app = new Vue({
            el: '#app',
            data: {
                message: 'hello'
            },
            components: {
                'cpn2': {
                    template: `
                        <div>
                            <h2>title two</h2>
                            <p>content two</p>
                        </div>
                    `
                }
            }
        }) 
    </script>
</body>
 

分离式写法

<body>
    <div id="app">
        <cpn></cpn>
        <cpn></cpn>
        <cpn></cpn>
    </div>

    <!-- 1.script标签,注意:类型必须是text/x-template -->
    <!-- <script type="text/x-template" id="cpn">
        <div>
            <h2>title</h2>
            <p>content happy</p>
        </div>
    </script> -->

    <!-- 2.template 标签 -->
    <template id="cpn">
        <div>
            <h2>title</h2>
            <p>content one</p>
        </div>
    </template>
    <script  src="../js/vue.js"></script>
    <script>

        // 1.注册一个全局组件
        Vue.component('cpn', {
            template: '#cpn'
        })

        const app = new Vue({
            el: '#app',
            data: {
                message: 'hello'
            }
        }) 
    </script>
</body>
 

原创文章,作者:我心飞翔,如若转载,请注明出处:https://www.pipipi.net/12558.html

发表评论

登录后才能评论