10.(VueComponent)组件化开发

一.什么是组件化

vue.js 有两大法宝，一个是数据驱动，另一个就是组件化，那么问题来了，什么叫做组件化，为什么要组件化？接下来我就针对这两个问题一一解答，所谓组件化，就是把页面拆分成多个组件，每个组件依赖的 CSS、JS、模板、图片等资源放在一起开发和维护。 因为组件是资源独立的，所以组件在系统内部可复用，组件和组件之间可以嵌套，如果项目比较复杂，可以极大简化代码量，并且对后期的需求变更和维护也更加友好。

image.png

二.如何注册组件

2.1 非单文件注册组件

2.1.1 如何定义一个子组件？

  1. 如何定义一个组件？--使用Vue.extends(options)去创建

  2. javaScript本质上是一个函数，我们后面写<javaScript/>,Vue帮我们去new JavaScript

    1. console.log(typeof (javaScript)); //function

  3. Vue.extends(options)中的options是配置对象，这个配置和我们new Vue(options)一样，区别如下：

      3.1 **不能有el属性去指定容器**

       原因：所有组件实例最终要被一个VM所管理，vm中会指定好el,即：组件让位给那个容器
image-20210709201849339
    3.2 **data必须写成函数**

         原因：==为了确保多个组件内的数据不会相互污染==

    3.3 **组件内的模板解构要配置在template里面，**

        1.使用模板字符串

        2.模板字符串必须只有一个根标签

  1. ==组件命名方式，尽量用短横线，用驼峰命名，使用时也得是短横线。==最好就别用驼峰命名组件了

    Vue.component('HelloWorld', ....... });
<hello-world></hello-world>

2.1.2 注册一个组件

2.1 全局注册:

 ```
 Vue.component(组件名, 组件)
 ```

2.2 局部注册:局部组件只能在注册他的父组件中使用

 在vm里添加一个components里注册

2.3 全局组件个局部组件的区别：

全局组件是挂载在 Vue.options.components 下，而局部组件是挂载在 vm.$options.components 下，这也是全局注册的组件能被任意使用的原因。

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>非单文件组件</title>
  </head>

  <body>
    <div id="app">
      <h1>父组件</h1>
      <h1>{{msg}}</h1>
      <p>------------------------------</p>
      <javascript></javascript>
    </div>

  </body>
  <script src="../js/vue.js"></script>
  <script>
    /* 
    一.如何定义一个子组件？
      1.如何定义一个组件？--使用Vue.extends(options)去创建
      2.javaScript本质上是一个函数，我们后面写<javaScript/>,Vue帮我们去new JavaScript
      3.Vue.extends(options)中的options是配置对象，这个配置和我们new Vue(options)一样，区别如下：
        3.1 不能有el属性去指定容器
            原因：所有组件实例最终要被一个VM所管理，vm中会指定好el,即：组件让位给那个容器
        3.2 data必须写成函数
            原因：为了确保多个组件内的数据不会相互污染
        3.3 组件内的模板解构要配置在template里面，
          1. 使用模板字符串
          2.模板字符串必须只有一个根标签
    二.注册一个组件
      2.1 全局注册
          Vue.component(组件名, 组件)
      2.2 局部注册      
          在vm里添加一个components里注册
    */
    //1.定义一个组件
    const javaScript = Vue.extend({
      // el: "#app",
      data() {
        return {
          course: "javaScript"
        }
      },
      template: `
      <div>
        <h2>我是JS子组件</h2>
        <h2>{{course}}</h2>
      </div>`
    })

    // 2.全局注册一个组件
    Vue.component('javascript', javaScript)

    // console.log(typeof (javaScript)); //function
    
    // 定义一个vm,去管理所有的组件
    const vm = new Vue({
      el: "#app",
      data() {
        return {
          msg: "编程课程",
        }
      },
    })
  </script>

</html>
image-20210709202456247

2.2 单文件注册组件

2.2.1 什么是单文件组件：

把一个组件全部内容汇合到一个文件中，文件名字是以 .vue 结尾的就称作 vue单文件组件

2.2.2 最简单使用

  • 通过Vuecli创建一个空的项目并运行
  • 创建单文件组件 src/component/01.单文件组件.vue
  • src/main.js 文件中导入、注册组件
  • public/index.html 文件 使用 单文件组件

2.2.3 组织结构

<template>
  相关html标签
</template>

<script>
  export default {
    data,
    methods,
    computed,
    filters,
    created,
    ……
  }
</script>

<style>
  css样式内容
</style>

三. 全局注册和局部注册

3.1 全局注册:

在 vue.js 中我们可以使用 Vue.component(tagName, options) 进行全局注册，例如

 ```

Vue.component(组件名, 组件)
或
Vue.component('my-component', {
// 选项
})
```

3.2 局部注册:局部组件只能在注册他的父组件中使用

Vue.js 也同样支持局部注册，我们可以在一个组件内部使用 components 选项做组件的局部注册，例如：

import HelloWorld from './components/HelloWorld'

export default {
  components: {
    HelloWorld
  }
}

在vm里添加一个components里注册

3.3 全局组件个局部组件的区别：

==全局组件是挂载在 Vue.options.components 下，而局部组件是挂载在 vm.$options.components 下，这也是全局注册的组件能被任意使用的原因==

四.==理解Vue,VueComponent,VueModel之间的关系==

一.特别提示：

  1. Student确实是构造函数，但不是我们亲手写的Student，是Vue.extend生成的。
  2. Vue.extend调用的返回值是VueComponent构造函数，所以new Student其实就是在new VueComponent.
  3. 所谓组件实例，就是VueComponent创建的实例，简称vc
    所谓Vue实例，就是Vue创建的实例，简称vm

二.最重要的关系总结：
==VueComponent继承了Vue,所以Vue.prototype上得属性和方法，vc度可以看得见==

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>非单文件组件2</title>
  </head>

  <body>
    <div id="app">
      <h1>------------App组件---------------</h1>
      <h1>{{msg}}</h1>
      <Person></Person>
      <Student></Student>
    </div>
    <template id="p">
      <div>
        <h1>-----------Person对象-------------</h1>
        <h2>{{msg}}</h2>
      </div>
    </template>
    <template id="s">
      <div>
        <h1>-----------Student对象-------------</h1>
        <h2>{{msg}}</h2>
      </div>
    </template>
  </body>
  <script src="../js/vue.js"></script>
  <script>
    /* 
    三.特别提示：
        3.1 Student确实是构造函数，但不是我们亲手写的Student，是Vue.extend生成的。
        3.2 Vue.extend调用的返回值是VueComponent构造函数，所以new Student其实就是在new VueComponent.
        3.3 所谓组件实例，就是VueComponent创建的实例，简称vc
            所谓Vue实例，就是Vue创建的实例，简称vm
    四.最重要的关系总结：
        VueComponent继承了Vue,所以Vue.prototype上得属性和方法，vc度可以看得见  
    
    */
    Vue.config.productionTip = false;
    const Person = Vue.extend({
      data() {
        return {
          msg: "我是一个Person对象"
        }
      },
      template: '#p'
    })

    Vue.prototype.xyz = 100;

    const Student = Vue.extend({
      data() {
        return {
          msg: "我是一个Student对象"
        }
      },
      template: '#s'
    })

    /* Vue.component('Person', Person)
    Vue.component('Student', Student) */

    const vm = new Vue({
      el: "#app",
      data() {
        return {
          msg: "Hello Vue"
        }
      },
      components: {
        Student,
        Person,
      }
    })
    // vm.$children[0].__proto__.__proto__ === Vue.prototype //true
    // vm.$children[0].__proto__ instanceof Vue //true
  </script>

</html>
image-20210710235623545

接上图

image-20210710235931386
image-20210711000033207
VueExtend
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • Vue 组件化开发
    Vue 组件化介绍 组件化是 Vue 的精髓, Vue 就是由一个一个的组件构成的 组件化思想是笔者认为世界上最美...
    coderlion阅读 818评论 0赞 0
  • 组件化开发、Vue Router、Vue CLI
    此笔记是我在拉勾学习课程过程中的总结，文字原创，笔记里很多技巧和知识是老师总结的，如果有侵权，请联系本人！ 组件化...
    你好肥猫阅读 532评论 0赞 2
  • Vue 组件化开发
    组件化开发思想 现实中的组件化思想体现（1）标准（2）分治（3）重用（4）组合 编程中的组件化思想体现 组件化规范...
    辽A丶孙悟空阅读 1,910评论 1赞 19
  • 5.组件化开发
    1. 组件化跟模块化的区别 组件的出现就是为了拆分 vue 实例的庞大内容的，我们可以以不同的组件来划分不同的功能...
    Metallica_d8b1阅读 452评论 0赞 0
  • 前端组件化开发实践
    作者：陆国圣 编辑：Sammi 什么是前端组件化开发? 我们在前端项目的开发流程中，把一个需求在一定的颗粒度范围内...
    Kyligence阅读 1,883评论 0赞 7