Vue知识点整理（二）- Vue组件化编程（1）- 使用组件三大步骤、组件的嵌套、VueComponent构造函数、重要的内置关系

JHY97

已于 2022-04-15 15:17:36 修改

阅读量3.2k

点赞数 1

分类专栏： Vue笔记文章标签：前端 vue

于 2022-04-15 07:30:00 首次发布

本文链接：https://blog.csdn.net/JHY97/article/details/124045078

版权

Vue笔记专栏收录该内容

34 篇文章 7 订阅

订阅专栏

3.4 案例练习 -- 非单文件组件基本使用

一、模块与组件

1.1 模块

向外提供特定功能的js程序，一般就是一个js文件

作用：复用js，简化js的编写，提高js运行效率

1.2 组件

组件的定义：实现应用中局部功能代码和资源的集合

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

二、模块化与组件化

2.1 模块化

当应用的js都是以模块来编写的，那这个应用就是一个模块化应用

2.2 组件化

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

三、Vue中使用组件的三大步骤

定义组件（创建组件）
注册组件
使用组件（写组件标签）

3.1 如何定义一个组件

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

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

注意：使用template可以配置组件结构

3.2 如何注册组件？

局部注册：在 new Vue 的时候传入 components 选项
全局注册：靠 Vue.component('组件名',组件)

3.3 编写组件标签

<组件名></组件名>
快捷键：组件名 + > + TAB按键
在VS Code设置选项内直接设置，勾选相关设置后，只需按TAB键即可

3.4 案例练习 -- 非单文件组件基本使用

  <body>
    <div class="root">
      <!-- 第三步：编写组件标签 -->
      <game></game>
      <hr />
      <player></player>
      <say></say>
      <hr />
    </div>

    <div class="root2">
      <say></say>
    </div>
  </body>
  <script>
    Vue.config.productionTip = false;

    // 第一步：创建game组件
    const game = Vue.extend({
      // 组件定义时，不要写el配置项
      template: `
            <div>
                <h2>游戏名：{{gameName}}</h2>
                <h2>创作者：{{creater}}</h2>
            </div>
        `,
      data() {
        return {
          gameName: "艾尔登法环",
          creater: "宫崎英高",
        };
      },
    });

    // 第一步：创建player组件
    const player = Vue.extend({
      // 组件定义时，不要写el配置项
      template: `
            <div>
                <h2>玩家名：{{playerName}}</h2>
                <h2>角色初始身份：{{status}}</h2>
            </div>
        `,
      data() {
        return {
          playerName: "太阳骑士",
          status: "无用之人",
        };
      },
    });

    // 第一步：创建say组件
    const say = Vue.extend({
      template: `
            <div>
            <h2>{{name}}跌上神坛</h2>
            </div>
        `,
      data() {
        return {
          name: "宫崎老贼",
        };
      },
    });

    // 第二步：全局注册组件
    Vue.component("say", say);
    // 创建vm
    new Vue({
      el: ".root",
      //   第二步：注册组件（局部注册）
      components: {
        game, // game:game 的简写形式，vm内定义的组件名:创建组件时定义的组件名，相同可简写
        player,
      },
    });

    // 为.root2服务的vm不注册任何的组件
    new Vue({
      el: ".root2",
    });
  </script>

3.5 关于组件的注意点

3.5.1 关于组件命名

一个单词组成的情况：

第一种写法（首字母小写），例如：name

第二种写法（首字母大写），例如：Name

多个单词组成的情况：

第一种写法（kebab-case命名）：my-name

第二种写法（CamelCase命名）：MyName（需要Vue脚手架支持）

注意：

组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行
可以使用name配置项指定组件在开发者工具中呈现的名字

const 自定义组件名 = Vue.extend({
        name: 'name配置项指定组件在开发者工具中呈现的名字'
    })

3.5.2 关于组件标签

第一种写法：<组件名></组件名>

第二种写法：<组件名/>

注意：不用使用脚手架时，<组件名/>会导致后续组件不能渲染

3.5.3 一个简写方式

    const 自定义组件名 = Vue.extent(options) 可简写为: const 自定义组件名 = options

    const mygame = {
      name: "mygame",
      template: `
            <div>
                <h2>玩家名：{{playerName}}</h2>
                <h2>角色初始身份：{{status}}</h2>
            </div>
        `,
      data() {
        return {
          playerName: "太阳骑士",
          status: "无用之人",
        };
      },
    };

四、组件的嵌套

以 3.4案例为基础的组件嵌套

  <body>
    <div class="root">
      <!-- 第三步：编写组件标签 -->
      <app></app>
      <!-- 可直接在vm内配置template -->
    </div>

    <div class="root2">
      <say></say>
    </div>
  </body>
  <script>
    Vue.config.productionTip = false;

    // 第一步：创建player组件
    const player = Vue.extend({
      // 组件定义时，不要写el配置项
      template: `
            <div>
                <h2>玩家名：{{playerName}}</h2>
                <h2>角色初始身份：{{status}}</h2>
            </div>
        `,
      data() {
        return {
          playerName: "太阳骑士",
          status: "无用之人",
        };
      },
    });

    // 第一步：创建game组件
    const game = Vue.extend({
      // 组件定义时，不要写el配置项
      template: `
            <div>
                <h2>游戏名：{{gameName}}</h2>
                <h2>创作者：{{creater}}</h2>
                <player></player>
            </div>
        `,
      data() {
        return {
          gameName: "艾尔登法环",
          creater: "宫崎英高",
        };
      },
      components: { player },
    });

    // 第一步：创建say组件
    const say = Vue.extend({
      template: `
            <div>
            <h2>{{name}}跌上神坛</h2>
            </div>
        `,
      data() {
        return {
          name: "宫崎老贼",
        };
      },
    });

    // 定义app组件
    const app = Vue.extend({
      template: `
            <div>
                <game></game>
                <say></say>
            </div>    
        `,
      components: {
        game,
        say,
      },
    });

    // 创建vm
    new Vue({
      //   template: `<app></app>`,
      el: ".root",
      //   第二步：注册组件（局部注册）
      components: { app },
    });
  </script>

图示中可看出父子级关系

五、VueComponent构造函数

5.1 关于VueComponent

我们自定义命名的组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的
我们只需要写 <组件名/> 或 <组件名></组件名>，Vue解析时会帮我们创建自定义命名组件的实例对象
特别注意：每次调用Vue.extend，返回的都是一个全新的 VueComponent
关于this指向：
1. 组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数，它们的this均是【VueComponent实例对象】
2. new Vue()配置中：data函数、methods中的函数、watch中的函数、computed中的函数，它们的this均是【Vue实例对象】
VueComponent的实例对象，一般简称为vc（也可称之为：组件实例对象），Vue的实例对象，一般简称为vm

5.2 验证

    <div class="root">
      <!-- 第三步：编写组件标签 -->
      <game></game>
    </div>
  </body>
  <script>
    Vue.config.productionTip = false;

    // 第一步：创建game组件
    const game = Vue.extend({
      // 组件定义时，不要写el配置项
      template: `
            <div>
                <h2>游戏名：{{gameName}}</h2>
                <h2>创作者：{{creater}}</h2>
            </div>
        `,
      data() {
        return {
          gameName: "艾尔登法环",
          creater: "宫崎英高",
        };
      },
    });

    // 创建vm
    new Vue({
      el: ".root",
      //   第二步：注册组件（局部注册）
      components: { game },
    });
  </script>

5.2.1 验证第一点

在定义game组件后添加console.log输出

    console.log("game", game);

5.2.2 验证第二点

在引入的Vue.js内搜索 VueComponent 所在的代码段，添加一段console.log输出

      var Sub = function VueComponent(options) {
        console.log("VueComponent被调用了"); // 个人添加
        this._init(options);
      };

且在容器内输出两次组件

    <div class="root">
      <!-- 第三步：编写组件标签 -->
      <game></game>
      <game></game>
    </div>

图示可看到 VueComponent构造函数执行了两次，并帮我们创建2个自定义命名组件的实例对象

5.2.3 验证第三点

首先添加一个组件并注册，然后全等对比先前已经定义的组件

    const say = Vue.extend({
      template: `
            <div>
            <h2>{{name}}跌上神坛</h2>
            </div>
        `,
      data() {
        return {
          name: "宫崎老贼",
        };
      },
    });

    console.log(
      "验证每次调用，返回的是不是一个全新的 VueComponent",
      game === say
    );
    // 创建vm
    new Vue({
      el: ".root",
      //   第二步：注册组件（局部注册）
      components: { game, say },
    });

由图示可知，全等对比的结果为false，即每次调用Vue.extend，返回的都是一个全新的 VueComponent

5.2.3 验证第四点

首先为先前定义的组件，添加含有点击事件的按钮

    // 第一步：创建game组件
    const game = Vue.extend({
      // 组件定义时，不要写el配置项
      template: `
            <div>
                <h2>游戏名：{{gameName}}</h2>
                <h2>创作者：{{creater}}</h2>
                <button @click='showName'>点击控制台显示this</button>
            </div>
        `,
      data() {
        return {
          gameName: "艾尔登法环",
          creater: "宫崎英高",
        };
      },
      methods: {
        showName() {
          console.log("showName", this);
        },
      },
    });

由图示可以看出，点击按钮后，控制台显示的this指向的是 VueComponent实例对象

六、一个重要的内置关系

一个重要的内置关系：

VueComponent.prototype.__proto__ === Vue.prototype

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

首先由上图可以看出来，Vue.prototoype -> Vue的原型对象，然后 Vue.__proto__ -> Object的原型对象

Vue的实例对象：vm 同理，可以看出vm.__proto__ -> Vue的原型对象，然后 Vue.__proto__ -> Object的原型对象

可以简单设置一个vm，从控制台输出，然后从其prototype属性中找出Vue的原型对象内对应的方法，以及由Vue的原型对象内 __proto__属性找出 Object的原型对象 内的方法

  <script>
    Vue.config.productionTip = false;

    // 创建vm
    const vm = new Vue({
      el: ".root",
    });

    console.dir(vm);
  </script>

谷歌控制台 __proto__也按 [[prototoype]]来显示

而在VueComponent.prototoype -> VueComponent的原型对象，而 VueComponent.__proyo__并非最终指向 Object的原型对象，而是经过Vue的操作下指向了Vue的原型对象，所以 VueComponent.__proyo__ -> Vue的原型对象

写个案例认证一下这个说法，可以通过VueComponent实例对象 找到 VueComponent的原型对象，并且可以在 VueComponent.__proyo__内找到 Vue的原型对象

  <script>
    Vue.config.productionTip = false;

    // 第一步：创建game组件
    const game = Vue.extend({
      // 组件定义时，不要写el配置项
      template: `
            <div>
                <h2>游戏名：{{gameName}}</h2>
                <h2>创作者：{{creater}}</h2>
            </div>
        `,
      data() {
        return {
          gameName: "艾尔登法环",
          creater: "宫崎英高",
        };
      },
    });

    // 创建vm
    const vm = new Vue({
      el: ".root",
      //   第二步：注册组件（局部注册）
      components: { game },
    });

    console.dir(game);
  </script>

因此让组件实例对象（vc）可以访问到Vue原型上的属性、方法

为Vue.prototype 添加个x属性来做个简单验证

  <body>
    <div class="root">
      <!-- 第三步：编写组件标签 -->
      <game></game>
    </div>
  </body>
  <script>
    Vue.config.productionTip = false;
    Vue.prototype.x = 9527;

    // 第一步：创建game组件
    const game = Vue.extend({
      // 组件定义时，不要写el配置项
      template: `
            <div>
                <h2>游戏名：{{gameName}}</h2>
                <h2>创作者：{{creater}}</h2>
                <button @click='showX'>点击按钮输出x</button>
            </div>
        `,
      data() {
        return {
          gameName: "艾尔登法环",
          creater: "宫崎英高",
        };
      },
      methods: {
        showX() {
          console.log(this.x);
        },
      },
    });

    // 创建vm
    const vm = new Vue({
      el: ".root",
      //   第二步：注册组件（局部注册）
      components: { game },
    });
  </script>

由图可看出 VueComponent实例上点击按钮输出的x，与 Vue.prototype.x 的值相同

JHY97

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue知识点整理（二）- Vue组件化编程（1）- 使用组件三大步骤、组件的嵌套、VueComponent构造函数、重要的内置关系

一、模块与组件1.1 模块向外提供特定功能的js程序，一般就是一个js文件作用：复用js，简化js的编写，提高js运行效率1.2 组件组件的定义：实现应用中局部功能代码和资源的集合作用：复用编码，简化项目编码，提高运行效率二、模块化与组件化2.1 模块化当应用的js都是以模块来编写的，那这个应用就是一个模块化应用2.2 组件化当应用中的功能都是多组件的方式来编写的，那这个就是一个组件化的应用三、Vue中使用组件的三大步骤定义组件（创建组件）注册
复制链接

扫一扫