vue 基础 组件化的基本使用

vue 组件化

一、vue组件化的基本使用

   <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({
            template:`
            <div>
                <h2>我是标题</h2>
                <p>我是内容</p>
            </div>`
        })
        // 2.注册组件
        Vue.component('my-cpn',cpnC)
        
        const app = new Vue({
            el:"#app",
            data:{
                message:'你好啊'
            }
        })
    </script>

步骤：

• 1.创建组件

     const cpnC = Vue.extend({
            template:`
            <div>
                <h2>我是标题</h2>
                <p>我是内容</p>
            </div>`
        })

• 2.注册组件
  第一个值就是在app 中展示的组件名称
  第二个值就是创建组件是 的名称（const 后 面的那个词）

 Vue.component('my-cpn',cpnC)

• 3.使用组件
  把 注册组件时候的那个名称 （第一个值） 在app中 以标签的形式展示 （这就是使用组件）

  <my-cpn></my-cpn>

二、全局组件与局部组件

 <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>我是标题</h2>
                    <p>我是内容</p>
                </div>
            `
        })
        // 2.注册组件（全局组件）
        // Vue.component('cpn',cpnC)
        const app = new Vue({
            el:"#app",
            data:{
                message:'你好呀'
            },
            // 局部组件
            components:{
                //使用组件时的标签名
                cpn:cpnC
            }
        })
        const app2 = new Vue({
            el:"#app2"
        })
    </script>

本质 ：全局组件 ：在哪里都可以使用 局部组件：在哪里注册的只能在哪里使用

步骤：

• 1全局组件的注册 与 vue是同级的

        Vue.component('cpn',cpnC)

2.局部组件 注册在 vue实例中 的 component 属性中 与 el 、 data、同级

   components:{
          //使用组件时的标签名
           cpn:cpnC
 }

三、父组件与子组件

        <div id="app">
            <cpn2></cpn2>
            <cpn1></cpn1>
        </div>
        <script src="../js/vue.js"></script>
        <script>
            // 1.创建第一个组件（子）
            const cpnC1 = Vue.extend({
                template: `
            <div>
                <h2>我是标题1</h2>
                <p>我是内容111111</p>
            </div>
            `,
            });
            // 2.创建第二个组件(父)
            const cpnC2 = Vue.extend({
                template: `
            <div>
                <h2>我是标题2</h2>
                <p>我是内容222222</p>
                <cpn1></cpn1>
            </div>
            `,
                components: {
                    cpn1: cpnC1,
                },
            });
            const app = new Vue({
                el: "#app",
                data: {
                    message: "你好啊",
                },
                components: {
                    cpn2: cpnC2,
                    cpn1: cpnC1,
                },
            });
        </script>

步骤：
1.先创建2个组件
2.在vue实例中注册为局部组件
3.在父组件中导入子组件就是 组件1

            const cpnC2 = Vue.extend({
                template: `
            <div>
                <h2>我是标题2</h2>
                <p>我是内容222222</p>
                <cpn1></cpn1>
            </div>
            `,
                components: {
                    cpn1: cpnC1,
                },
            });

4.在使用 父组件 (组件2)的时候 子组件也会一起显示

四、组件的语法糖

        <div id="app">
            <cpn1></cpn1>
            <cpn2></cpn2>
        </div>
        <script src="../js/vue.js"></script>
        <script>
            // 1.创建第一个组件（子）
            // const cpnC1 = Vue.extend();
            // 2.组件注册 (全局组件语法糖)
            Vue.component("cpn1", {
                template: `
            <div>
                <h2>我是标题1</h2>
                <p>我是内容111111</p>
            </div> 
            `,
            });

            const app = new Vue({
                el: "#app",
                data: {
                    message: "你好啊",
                },
                //注册局部组件的语法糖
                components: {
                    'cpn2': {
                        template: `
                        <div>
                            <h2>我是标题2</h2>
                            <p>我是内容222222</p>
                        </div> 
                        `,
                    },
                },
            });
        </script>

本质：省略创建的那一步 注册的时候把 模板加进去
1.全局组件

             Vue.component("cpn1", {
                template: `
            <div>
                <h2>我是标题1</h2>
                <p>我是内容111111</p>
            </div> 
            `,
            });

2.局部组件

             components: {
                    'cpn2': {
                        template: `
                        <div>
                            <h2>我是标题2</h2>
                            <p>我是内容222222</p>
                        </div> 
                        `,
                    },
                },

五、组件模板的分离写法

        <div id="app">
            <cpn1></cpn1>
        </div>
        <!-- 1. script 类型是 text/x-template-->
        <!-- <script type="text/x-template" id="cpn">
            <div>
                <h2>我是标题1</h2>
                <p>我是内容111111</p>
            </div>
        </script> -->

        <!-- 2.template 标签 -->
        <template id="cpn">
            <div>
                <h2>我是标题1</h2>
                <p>我是内容111111</p>
            </div>
        </template>
        <script src="../js/vue.js"></script>
        <script>
            // 1.创建第一个组件（子）
            // const cpnC1 = Vue.extend();
            // 2.组件注册 (全局组件语法糖)
            Vue.component("cpn1", {
                template:"#cpn"
            });

            const app = new Vue({
                el: "#app",
                data: {
                    message: "你好啊",
                },
                //注册局部组件的语法糖
                components: {

                },
            });
        </script>

步骤：
1.新建一个 template 标签 绑定一个id

        <template id="cpn">
            <div>
                <h2>我是标题1</h2>
                <p>我是内容111111</p>
            </div>
        </template>

2.注册全局组件的语法糖 分离

            // 2.组件注册 (全局组件语法糖)
            Vue.component("cpn1", {
                template:"#cpn"
            });

3.注册局部组件的语法糖 分离

               //注册局部组件的语法糖
                components: {
                    cpn1:{template:"#cpn"}
                },

六、组件中的数据存放问题

       <div id="app">
            <cpn></cpn>
        </div>
        <!-- 1. script 类型是 text/x-template-->
        <!-- <script type="text/x-template" id="cpn">
            <div>
                <h2>我是标题1</h2>
                <p>我是内容111111</p>
            </div>
        </script> -->

        <!-- 2.template 标签 -->
        <template id="cpn">
            <div>
                <h2>{{title}}</h2>
                <p>我是内容111111</p>
            </div>
        </template>
        <script src="../js/vue.js"></script>
        <script>
            // 1.创建第一个组件（子）
            // const cpnC1 = Vue.extend();
            // 2.组件注册 (全局组件语法糖)
            Vue.component("cpn", {
                template:"#cpn",
                //数据存放在函数中
                data(){
                    return {
                        title:'abc'
                    }
                }
            });

            const app = new Vue({
                el: "#app",
                data: {
                    message: "你好啊",
                },
                //注册局部组件的语法糖
                components: {
                    // 'cpn':{ template:"#cpn"}
                },
            });
        </script>

说明：
1.数据一般存放在函数中

         // 2.组件注册 (全局组件语法糖)
            Vue.component("cpn", {
                template:"#cpn",
                //数据存放在函数中
                data(){
                    return {
                        title:'abc'
                    }
                }
            });