组件的认识与使用

终是痴情负了空

已于 2022-09-15 17:10:42 修改

阅读量1.4k

点赞数 1

分类专栏： vue基础文章标签：前端 javascript java

于 2022-09-14 19:41:40 首次发布

本文链接：https://blog.csdn.net/m0_51092575/article/details/126833397

版权

vue基础专栏收录该内容

20 篇文章 0 订阅

订阅专栏

一、对组件的理解

1、传统方式编写应用：

存在问题：

依赖关系混乱，不好维护；
代码复用率不高；

2、使用组件方式编写应用：

二、组件的定义：

定义——实现应用中局部功能代码和资源的集合;

作用—— 复用编码,简化项目编码，提高运行效率。

三、相关概念理解

1.模块

1.理解: 向外提供特定功能的js程序,一般就是一个js文件。
2.为什么: js 文件很多很复杂。
3.作用: 复用js,简化js的编写，提高js运行效率。

2.模块化

假设某个js文件过大时，按照一定的模块进行拆分，就可以称为模块化；
当应用中的js都以模块来编写的，那这个应用就是一个模块化的应用。

3.组件化

当应用中的功能都是多组件的方式来编写的，那这个应用就是一个组件化的应用。

4.组件类型

非单文件组件—— 一个文件中包含有n个组件。
单文件组件——一个文件中只包含有1个组件。

四、非单文件组件的使用步骤

（1）定义组件(创建组件)

使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options儿乎一样，但也有点区别如下:

el不要写，为什么?—最终所有的组件都要经过一个vm的管理，山vm中的el决定服务哪个容器。
data必须写成函数。为什么?——避免组件被复用时，数据存在引用关系。

备注:使用template可以配置组什结构。

 //第一步：创建student组件
  const student = Vue.extend({
    template:`
    <div>
      <h2>学生名称：{{studentName}}</h2>
      <h2>学生年龄：{{age}}</h2>
     </div> `,
    data(){
      return{
        studentName: '张家 ',
        age: 18
      }
    }
  })
//第一步：创建hello组件
  const hello = Vue.extend({
    template:`
      <div>
        <h2>你好啊,{{name}}</h2>
      </div>
    `,
    data(){
      return{
        name:'css'
      }
    }
  })

（2）注册组件

1.局部注册:

new vue的时候传入components选项

new Vue({
    el:'#root',
    //第二步：注册组件（局部注册）
    data:{
      msg:'good'
  },
    components:{
      //school,//简写形式
      stu:student
    },
  })

2.全局注册:

Vue.component('组件名",组件)

 //第二步：注册组件（全局注册）
  Vue.component('hello',hello)

（3）使用组件(写组件标签

 <div id="root">
<!--   第三步： 编写组件标签-->
   
    <stu></stu>
    <hr>
  </div>
  <div id="root2">
    <hello></hello>
  </div>

效果展示（非单文件组件）：

完整代码展示（非单文件组件）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>
  <div id="root">
<!--   第三步： 编写组件标签-->
    {{msg}}
    <hr>
    <school></school>
    <hr>
    <stu></stu>
    <hr>
  </div>
<div id="root2">
  <hello></hello>
</div>
</body>
<script>
  Vue.config.productionTip=false
  //第一步：创建school组件
  const school = Vue.extend({
    template:`
    <div>
      <h2>学校名称：{{schoolName}}</h2>
      <h2>学校地址：{{address}}</h2>
      <button @click="showName">点我提示学校名</button>
    </div>
    `,
    data(){
      return{
        schoolName: '尚硅谷',
        address: '北京昌平',
      }
    },
    methods: {
      showName() {
        alert(this.schoolName)
      }
    }
  })
  //创建student组件
  const student = Vue.extend({
    template:`
    <div>
      <h2>学生名称：{{studentName}}</h2>
      <h2>学生年龄：{{age}}</h2>
     </div> `,
    data(){
      return{
        studentName: '张家 ',
        age: 18
      }
    }
  })
  const hello = Vue.extend({
    template:`
      <div>
        <h2>你好啊,{{name}}</h2>
      </div>
    `,
    data(){
      return{
        name:'css'
      }
    }
  })
  //第二步：注册组件（全局注册）
  Vue.component('hello',hello)
  new Vue({
    el:'#root',
    //第二步：注册组件（局部注册）
    data:{
      msg:'good'
  },
    components:{
      school,//简写形式
      stu:student
    },
  })
  new Vue({
    el:'#root2',
  })

</script>
</html>

五、使用非单文件组件的注意点

1.关于组件名:

一个单词组成:

第一种写法(首字母小写):school
第二种写法(首字母大写):School

多个单词组成:

第一种写法(kebab-case命名): my-school
第二种写法(CamelCase命名):MySchool（需要Vue脚手架支持)

备注:

组件名尽可能回避HTML中已有的元素名称,例如:h2H2都不行。
可以使用name配置项指定组件在开发者工具中呈现的名字；

2.关于组件标签

第一种写法: <school></school>
第二种写法:<school/>

备注:不用使用脚手架时，<school/>会导致后续组件不能演染。

3.一个简写方式:

const school = Vue.extend(options）可简写为: const school = options

//简写形式
const school = {
    template:`
    <div>
      <h2>学校名称：{{schoolName}}</h2>
      <h2>学校地址：{{address}}</h2>
    </div>
    `,
    data(){
      return{
        schoolName: '尚硅谷',
        address: '北京昌平',
      }
    }
  }

六、 VueComponent

1.school组件实质是一个名Vuecomponent的构造函数，且不是由序员定义的，是Vue.extend生成的。
2.我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的:new VueComponent(options)；

3.特别注意:每次调用Vue.extend，返回的都是一个全新的VueComponent!!!!

从上图可以看出hello与school两个组件不相等，所以返回的也不是同一个VueComponent ;

4.关于this指向:
(1).组件配置中:
data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【VueComponent实例对象】

(2).new Vue()配置中:data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【Vue实例对象】

5.VueComponent的实例对象，以后简称vc（也可称之为:组件实例对象)。
Vue的实例对象，以后简称vm.

vm管理vc

因为组件是可复用的 Vue实例，所以它们与new Vue接收相同的选项，例如data,computed , match , methods 以及生命周期钩子等。仅有的例外是像el这样根实例特有的选项。

七、一个重要的内置关系

1.一个重要的内置关系:VueComponent.prototype._proto__ === Vue.prototype

2.为什么要有这个关系:让组件实例对象(vc)可以访问到Vue原型上的属性、方法.

八、单文件组件

<template>

//组件结构
    
</template>
<script>
// 组件交互关系的代码（数据，方法...)
  
</script>

<style>
  /*组件的样式*/
  
</style>

注意点：组件文件的名称以.vue结尾，文件名首字母为大写，如：School、StudentGroud

完整代码展示：

<template>
  <div class="demo">
    <h2>学校名称：{{schoolName}}</h2>
    <h2>学校地址：{{address}}</h2>
    <button @click="showName">点我，显示this指向</button>

  </div>
</template>
<script>
// 组件交互关系的代码（数据，方法...)
  export default {
    name:'School',
    data() {
      return {
        schoolName: '尚硅谷',
        address: '北京昌平',
      }
    },
    methods:{
      showName() {
        console.log('showName',this)
      }
    },
  }
</script>

<style>
  /*组件的样式*/
  .demo{
    background-color: aquamarine;
  }
</style>

同时，还需要配置，main.js，App.vue、index.html文件：