自学Vue必看组件基础知识总结_学vue要把组件都记好吗-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45473786/article/details/105174004

文章目录

什么是组件化

WHY：若将一个页面中所有的处理逻辑全部放到一起，处理起来就会变得很复杂，也可能存在大量重复代码，并且也不利于后续的管理以及扩展 。但如果将一个页面拆分成一个个小的功能块，每个功能块实现属于自己这部分独立的功能，那么之后整个页面的管理和维护就非常容易了
WHAT：将一个完整的页面分成很多个组件，每个组件动用与实现页面的一个功能块，而每一个组件有可以进行细分

Vue 组件化思想

（1）提供了一种抽象的思维，可以开发出一个个独立可复用的小组件来构造我们的应用，任何应用都会被抽象成以组件树（组件里面可以有组件）
（2）在开发中要尽可能地将页面拆分成一个个效地、可复用的组件，这样可以让代码更加方便组织和管理、扩展性更强

注册组件基本步骤（组件化的基本使用）

Vue.extend(): 创建一个组件构造器，在创建时传入template代表自定义组件的模板。该模版就是组件所使用的地方显示HTML代码，这种写法已经不常见了，更多用到的是语法糖
Vue.component(): 将组件构造器注册为一个组件，并且给它起一个组件的标签名称
需要两个参数：第一个参数是注册组件的标签名，第二个参数是组件构造器名称

注意：组件必须挂载在某个Vue实例中，否则不会生效

<body>
  <div id="app">
    <!-- //使用组件 -->
    <my-cpn></my-cpn>
  </div> 
  //必须挂载在某个Vue实例中，否则不会生效
  <my-cpn></my-cpn>
<script src="../vue.js"></script>
<script>
  // 创建组件构造器的对象
  const cpn = Vue.extend({
    template:`<div>
                <h2>我是第一个</h2>
                <h2>我是第二个</h2>
              </div>`
  });
  // 注册组件   （全局组件）
  Vue.component("my-cpn",cpn);

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

在这里插入图片描述

注册组件语法糖方式

实质：省去了调用Vue.extent()的步骤，而是直接使用一个对象来代替

<body>
  <div id="app">
    <cpn1></cpn1>
    <cpn2></cpn2>
  </div> 

<script src="../vue.js"></script>
<script>
  
  // 注册全局组件语法糖写法
  Vue.component('cpn1',{
    template:`<div>
                <h2>我是第一个组件</h2>
              </div>`,
    })

  const app = new Vue({
    el:'#app',
    //注册局部组件语法糖
    components:{      
      "cpn2":{
        template:`<div>
                <h2>我是第二个组件</h2>
                  </div>`
      }
    }
  })
</script>
</body>

在这里插入图片描述

组件模板的分离写法

组件模板的分离写法使用template标签，要用一个id来绑定

<body>
  <div id="app">
    <cpn1></cpn1>
  </div> 
//<!-- 模板分离 -->
<template id="cpn">
  <div>
    <h2>我是第一个组件</h2>
  </div>
</template>

<script src="../vue.js"></script>
<script>
  // 注册全局组件语法糖写法
  Vue.component('cpn1',{
    template:"#cpn"
    })
    
  const app = new Vue({
    el:'#app',
  })
</script>
</body>

全局组件和局部组件

全局组件：意味着可以在多个Vue实例中使用
局部组件：要挂载在某个Vue实例下

<body>
  <div id="app">
    <!-- //使用组件 -->
    <my-cpn></my-cpn>
  </div> 

  <div id="app1">
    <my-cpn></my-cpn>
    <cpn1></cpn1>
  </div>

<script src="../vue.js"></script>
<script>
  // 创建组件构造器的对象
  const cpn = Vue.extend({
    template:`<div>
                <h2>我是第一个</h2>
                <h2>我是第二个</h2>
              </div>`
  });

  const cpn1 = Vue.extend({
    template:`<div>
                <h2>我是局部组件</h2>
              </div>`
  });

  // 注册组件   （全局组件）
  Vue.component("my-cpn",cpn);

//使用全局组件Vue实例
  const app = new Vue({
    el:'#app',
  })

//使用全局组件和局部组件Vue实例
  var app1 = new Vue({
    el:'#app1',
    //局部组件
    components:{
      cpn1
    }
  })
</script>
</body>

在这里插入图片描述

父组件与子组件

注意事项：
（1）本实例知识是为了更清楚的展示父组件与子组件的关系才使用了套娃，平时开发中建议禁止套娃
（2）父组件中要用到子组件，所以第二个组件（子组件）的创建必须在第一个组件（父组件）之前
（3）在现实开发中，Vue实例可看成父组件，局部组件是子组件。在本例中可看成Vue实例是cpn1父组件，cpn1是cpn2的父组件
（4）子组件只能在父组件中被识别
（5）其他注意事项请看注释，都有详细说明

<body>
  <div id="app">
    //<!-- //使用组件 -->
    <cpn1></cpn1>
    //<!-- 报错，局部组件。子组件只能在父组件中被识别。cpn2在cpn1中已被解析成HTML语句-->
    <cpn2></cpn2> 
  </div> 

<script src="../vue.js"></script>
<script>
  // 创建第二个组件（子组件），必须在第一个组件前面
  const cpn2 = Vue.extend({
    template:`<div>
                <h2>我是第二个组件</h2>
              </div>`
  });

  // 创建第一个组件（父组件）
  const cpn1 = Vue.extend({
    template:`<div>
                <h2>我是第一个组件</h2>
                <cpn2></cpn2>
              </div>`,
     //注册子组件
    components:{
      cpn2
    }
  });

  const app = new Vue({
    el:'#app',
    //局部组件
    components:{
      //ES6增强写法，相当于"cnp1":cnp1
      cpn1
    }
  })
</script>
</body>