vue组件化总结

一.vue组件化思想

       如果我们将一个的页面的所有处理逻辑都放在一起,那么处理起来就变得非常复杂,而且也不利于后续的管理和扩展,如果我们把一个页面拆分成一个一个小的功能模块,每个模块完成对应的功能,组件之间相互独立,那么后期对这个页面的维护和管理也就变得简单了。

二.使用组件的步骤

1.创建组件构造器

调用Vue.extend()方法创建组件构造器

2.注册组件

调用Vue.component()方法注册组件

3.使用组件

在Vue实例的作用范围内使用组件

 三.组件化的使用

1.组件化的基本使用

<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({
        template: ` <div>
            <h2>标题标题标题</h2>
            <p>内容内容内容内容</p>
            <p>内容内容内容内容啊啊啊啊</p>
            <p>内容内容内容内容嘿嘿嘿嘿</p>
          </div>`
        })

        //2.注册组件
        Vue.component('my-cpn',cpnC)//my-cpn是组件的标签名
        new Vue({ el: '#app' })
        const app = new Vue({
            el: '#app',//用于挂在要管理的元素
                            })       
      </script> 
</body>

运行结果:

 步骤解析:

2.全局组件和局部组件

上面的案例是使用的全局组件,全局组件意味着可以在多个vue实例下使用。

那么怎么才算是局部组件?

在实例里面注册组件。在开发中一般用的局部组件。而且一般创建一个实例,不会创建多个实例。

<body>
    <div id="app">
      <!-- 3.使用组件 -->
        <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>
            <p>内容内容内容内容hhhhh</p>
            <p>内容内容内容内容嘿嘿嘿嘿</p>
          </div>`
        })

        //2.注册组件

        const app = new Vue({
            el: '#app',//用于挂在要管理的元素
            components:{
              'my-cpn':cpnC
            }
                            })       
      </script> 
</body>

 运行结果:

 3.父组件和子组件

3.1父组件和子组件的区分

组件和组件之间是有层级关系的,一般的层级关系就是父子关系。

那怎么体现父子关系呢?

子组件是注册到父组件的components里面的。

3.2注册组件的语法糖

<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()

        //2.注册组件
        Vue.component('my-cpn',{
        template: ` <div>
            <h2>标题标题标题</h2>
            <p>内容内容内容内容</p>
            <p>内容内容内容内容啊啊啊啊</p>
            <p>内容内容内容内容嘿嘿嘿嘿</p>
          </div>`
        })//my-cpn是组件的标签名
        const app = new Vue({
            el: '#app',//用于挂在要管理的元素
           
                            })         
      </script> 
</body>

这个语法糖直接把创建组件构造器对象这一步省略了,把构造器里面的模板的值赋给了注册组件。上面这个例子是全局组件的方法。

局部组件的话,直接在实例里面的component里面写模板内容就行了。

<body>
    <div id="app">
      <!-- 3.使用组件 -->
        <cpn2></cpn2>
      </div>

      <script src="./js/vue.js"></script>
      <script>
     
        new Vue({ el: '#app' })
        const app = new Vue({
            el: '#app',//用于挂在要管理的元素
            components:{
              'cpn2':{
                template:
                `<div>
                  <h2>我是标题1</h2>
                  <p>我是内容</p>
                  </div>`
              }
            }
                            })         
      </script> 
</body>

运行结果:

 这样写的话,子组件在父组件可以里面嵌套,template这一块会导致代码看上去很乱,那么我们需要把模板分离出来。

模板分离方法一:在注册组件前面用script标签把内容写出来,标签中type="text/x-template" ,定义id名,在components里面的template引用id名即可。(一般不用这个方法)

<body>
  <div id="app">
    <!-- 3.使用组件 -->
      <cpn2></cpn2>
    </div>

    <script src="./js/vue.js"></script>
   
    <script type="text/x-template" id="cpn">
      <div>
        <h2>我是标题</h2>
        <p>我是内容。。</p>
      </div>
    </script>
   
   <script>  
      const app = new Vue({
          el: '#app',//用于挂在要管理的元素
          components:{
            'cpn2':{
              template:
                `#cpn`
            }
          }
                          })         
    </script> 
</body>

运行结果:

模板分离方法二: 还是在注册界面前面用<template></template>标签,在标签内把模板内容写进去,并且需要id绑定。一般模板分离用这个方法。

<body>
  <div id="app">
    <!-- 3.使用组件 -->
      <cpn2></cpn2>
    </div>

    <script src="./js/vue.js"></script>
   
  <template id="cpn">
    <div>
      <h2>我是标题</h2>
      <p>我是内容。。</p>
    </div>
  </template>
   
   <script>  
      const app = new Vue({
          el: '#app',//用于挂在要管理的元素
          components:{
            'cpn2':{
              template:
                `#cpn`
            }
          }
                          })         
    </script> 
</body>

 运行结果是一样的。

3.3父子组件之间的通信

子组件是不能访问父组件或者vue的实例的,但是在开发中,往往一些数据需要从上层传递到下层,比如一个页面里面的一些内容不需要父组件展示,而是需要父组件下面的子组件展示。那么这个时候我们不会让子组件发送请求给父组件,而是让父组件将数据传递给子组件。

3.3.1如何进行父子组件的通信?

  • 通过props向子组件传递数据
  • 通过事件向父组件发送消息

1.通过props向子组件传递数据

注意:

  •  模板template必须有个根元素(代码中的div)。
  •  props的属性名是驼峰命名法的话,在显示的时候,在组件标签v-bind的时候需要按照驼峰命名法对应的属性名字来写。(尽量取名就用小写)
<body>
    <div id="app">
        <cpn v-bind:cnames="names" :cmessage="message"></cpn>
      </div>

      <template id='cpn'>
        <div>
          <ul>
            <li v-for="item in cnames">{{item}}</li>
          </ul>
          <h2>{{cmessage}}</h2>
        </div>
      </template>

      <script src="./js/vue.js"></script>
      <script>
        // 父传子,props
        const cpn ={
          template:`#cpn`,
          props:['cnames','cmessage']
        }

          const app = new Vue({
            el: '#app',//用于挂在要管理的元素
            data: {
              message: 'Hello Vue!',
              names:['京东','小米','美团']
            },
            components:{
              'cpn':cpn
            }
                            })             
      </script> 
</body>

 运行结果:

代码思路:首先在实例(父组件)里面准备数据(代码中为message和names),在实例中注册子组件cpn,在子组件的构造器添加props以及需要用到的变量名,在模板(template)里面使用这些变量,最后绑定在vue实例里面,用组件标签显示。

当然,props可以是对象,在对象里面对传进来的参数做一个类型限制。

    const cpn ={
          template:`#cpn`,
          props:{
            //1.类型限制
            cnames:Array,
            cmessage:String
          }
        }

或者类型限制的同时定义一个默认值。

 const cpn ={
          template:`#cpn`,
          props:{
            cmessage:{
              type:String,
              default:'aaaa',//默认值
              required:true//这句表示这个属性传值的时候必须传这个值
            }
          }}

            cnames:{
              type:Array,
              default:[]//在vue2.5.17版本下这个写法没有问题
            }

      如果类型是对象或者数组的时候,那么默认值必须是一个函数,函数里面要有返回值。

 cnames:{
              type:Array,
              default(){
                return []
              }
            }

2.通过事件向父组件发送消息

这个过程比父传子更常见,因为子组件一般会发生一些事件,比如用户点击事件之类的,子组件需要告诉父组件发生了这个事件,并且告诉父组件用户点击了什么,父组件根据子组件传过来的数据再去请求新的数据。

举个例子:在子组件定义几个按钮,点击按钮,控制台返回点击的信息。

<body>
  <!-- 父组件模板 -->
    <div id="app">
        <cpn ></cpn>
      </div>

<!-- 子组件模板 -->
      <template id='cpn'>
        <div>
          <button v-for="item in categories" @click="btnclick(item)">{{item.name}}</button>
        </div>
      </template>

      <script src="./js/vue.js"></script>
      <script>
        //子组件
        const cpn ={
          template:`#cpn`,
          props:{
           cnames:{
             type:Array
           } ,
           cmessage:{
             type:String
           }
          },
          data(){
            return{
              categories:[
                {id:'aaa',name:'电脑手机'},
                {id:'bbb',name:'热门推荐'},
                {id:'ccc',name:'家用家电'},
                {id:'ddd',name:'办公用品'},
              ]
            }
          },
          methods:{
            btnclick(item){
            console.log(item);
            }
          }
        }
        // 父组件
          const app = new Vue({
            el: '#app',//用于挂在要管理的元素
            data: {
              message: 'Hello Vue!',
              names:['京东','小米','美团']
            },
            components:{
              'cpn':cpn
            }
                            })             
      </script> 

自定义发射事件

代码思路:在子组件里面的method通过$emit()定义一个触发事件,发射事件名称为itemclick,参数为item。在父组件定义一个事件名为cpnclick的事件来监听(v-on)子组件模板的发射事件。

<body>
  <!-- 父组件模板 -->
    <div id="app">
        <cpn @itemclick="cpnclick"></cpn>
      </div>

<!-- 子组件模板 -->
      <template id='cpn'>
        <div>
          <button v-for="item in categories" @click="btnclick(item)">{{item.name}}</button>
        </div>
      </template>

      <script src="./js/vue.js"></script>
      <script>
        //子组件
        const cpn ={
          template:`#cpn`,
          props:{
           cnames:{
             type:Array
           } ,
           cmessage:{
             type:String
           }
          },
          data(){
            return{
              categories:[
                {id:'aaa',name:'电脑手机'},
                {id:'bbb',name:'热门推荐'},
                {id:'ccc',name:'家用家电'},
                {id:'ddd',name:'办公用品'},
              ]
            }
          },
          methods:{
            btnclick(item){
               this.$emit('itemclick',item)//发射一个事件,第一个参数为事件名称,第二个为事件参数
            }
          }
        }
        // 父组件
          const app = new Vue({
            el: '#app',//用于挂在要管理的元素
            data: {
              message: 'Hello Vue!',
              names:['京东','小米','美团']
            },
            components:{
              'cpn':cpn
            },
            methods:{
              cpnclick(item){
                console.log('cpnclick',item)
              }
            }
                            })             
      </script> 
</body>

打开网页随意点击一个按钮,在控制台可以看到点击的信息

3.3.2父子组件的访问方式

上面的父子通信方式都是通过子组件发射事件给父组件的,其实我们可以直接让父组件通过对象来访问子组件,或者子组件通过对象访问父组件。

1.父组件访问子组件:使用$clidren或$refs

父组件访问子组件一般用$refs,这个有点像class,$refs是对象类型,默认是一个空的对象,当给组件加 ref="aaa(id名)"时,在父组件里面调用 this.$refs.aaa.xxx就可以访问指定的子组件以及子组件里面的属性了。

举个栗子

<body>
    <div id="app">
        <div>
          <cpn ref="aaa">   
          </cpn>
          <button @click="btnclick">按钮</button>
        </div>
      </div>
      <template id="cpn">
        <div>
          我是子组件
        </div>
      </template>
      <script src="./js/vue.js"></script>
      <script>
          var app = new Vue({
            el: '#app',//用于挂在要管理的元素
            data: {
              message: 'Hello Vue!'//定义数据
            },
            methods:{
              btnclick(){
               console.log(this.$refs.aaa.name)
              }
            },

            components:{
              cpn:{
                template:`#cpn`,
                data(){
                  return{
                    name:'我是子组件的名字'
                  }
                },
              methods:{
                  showmessage(){
                    console.log('showmessage');
                  }
                }
              }
            }
         
                            })
                      
      </script> 

运行结果:点击按钮后

2.子组件访问父组件:$parent

几乎不用这个,这样用的话子组件的复用性就不强了。

补充:用$root可以访问根组件。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值