16vue学习_组件的使用（全局和局部）_说明全局组件和局部组件使用的步骤-CSDN博客

本文链接：https://blog.csdn.net/chencaw/article/details/113703093

这篇博客介绍了Vue.js中组件的基本使用步骤，包括组件构造、注册和使用。首先，通过`Vue.extend`创建了一个名为`my-cpn`的组件构造器，其内容包含一个标题和两段文字。接着，注册该组件为全局组件，使得在Vue实例中可以多次复用。此外，还展示了如何定义局部组件，将其应用于特定Vue实例内，以便在不同挂载点重复使用。

摘要由CSDN通过智能技术生成

1、组件的基本使用

（1）构造组件

（2）注册组件

（3）使用组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title-hellovuejs</title>
</head>
<body>
    <div id ="app">
        <!-- 3.使用组件 -->
        <my-cpn></my-cpn>
        <my-cpn></my-cpn>
        <my-cpn></my-cpn>
        <my-cpn></my-cpn>        
    </div>
    <script src="../js/vue.js"></script>
    <script>
        //1.创建组件构造器对象
        const cpnC = Vue.extend({
            //注意，使用了tab键上面的反斜杠``，因而可以换行定义
            template: `
                <div>
                    <h2>我是组件标题</h2>
                    <p>这是内容，111</p>
                    <p>这是内容，222</p>
                </div>`
        });
        //2.注册组件
        Vue.component('my-cpn',cpnC);

        const chen1 = new Vue({
            el: '#app',  //用于挂载要管理的元素
            data:{//定义数据
                message:'你好啊，helloword',
                isShow: true
            }
        });
    </script>
</body>

2、全局组件和局部组件

局部组件定义在vue的实例中

            // 以下是局部组件的用法
            components:{
                my_cpn: cpnC
            }

完整的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title-hellovuejs</title>
</head>
<body>
    <div id ="app">
        <!-- 3.使用组件 -->
        <my_cpn></my_cpn>
        <my_cpn></my_cpn>
        <my_cpn></my_cpn>     
    </div>
    <div id ="app2">
        <!-- 3.使用组件 -->
        <my_cpn></my_cpn>
    
    </div>
    <script src="../js/vue.js"></script>
    <script>
        //1.创建组件构造器对象
        const cpnC = Vue.extend({
            //注意，使用了tab键上面的反斜杠``，因而可以换行定义
            template: `
                <div>
                    <h2>我是组件标题</h2>
                    <p>这是内容，111</p>
                    <p>这是内容，222</p>
                </div>`
        });
        //2.注册组件,这是全局的做法
        // Vue.component('my_cpn',cpnC);

        const chen1 = new Vue({
            el: '#app',  //用于挂载要管理的元素
            data:{//定义数据
                message:'你好啊，helloword',
                isShow: true
            },
            // 以下是局部组件的用法
            components:{
                my_cpn: cpnC
            }
        });
        const chen2 = new Vue({
            el: '#app2'  //用于挂载要管理的元素
        });
    </script>
</body>