10.(VueComponent)组件化开发

946 阅读2分钟

一.什么是组件化

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

image.png

二.如何注册组件

2.1 非单文件注册组件

2.1.1 如何定义一个子组件?

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

  2. 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