【Vue2】组件的使用

模块 & 组件

1. 模块：向外提供特定功能的 JS 程序，一般就是一个 JS 文件
   因为 JS 文件很多很复杂，这样做可以复用 JS 代码、简化 JS 的编写、提高 JS 的运行效率
2. 组件：用来实现局部功能效果的代码集合 ( HTML / CSS / JS / images… )
   因为一个界面的功能很复杂，这样做可以复用代码、简化项目结构、提高运行效率

组件的使用

• 组件是可复用的 Vue 实例，可配置 data、methods、computed、watch & 生命周期钩子函数
• 但不能配置 el，el 为根实例特有的选项

不使用脚手架

// 第 1 步、 创建 school 组件
const school = Vue.extend({
    /* 1.1 组件定义时，一定不要写 el 配置项 */
    // 因为最终所有的组件都要被一个 vm 管理，由 vm 决定服务于哪个容器
    // el: "XXX"

    /* 1.2 定义组件时，data 必须使用函数式 */
    // 对于对象式写法：如果有多个页面使用了当前组件，组件数据是共享的。
    //     就是说，如果某页面修改了组件的数据，其他页面显示的数据也会跟着改变；
    // 对于函数式写法，因为是以闭包的形式返回数据，所以每个页面获取到的组件数据都是相互独立的
    data() {
        return { name: "SCNU", address: "GZ" }
    },

    /* 1.3 定义组件的模版 */
    template: `
        <div>
            <p>name: {{name}}</p>
            <p>address: {{address}}</p>
        </div>`,
});


const vm = new Vue({
    el: "#app",
    // 第 2 步、 注册组件（局部注册）
    components: { school }
});

<div id="app">
    <!-- 第 3 步、 使用组件 -->
    <school></school>
</div>

组件的创建(定义)：使用 Vue.extend({ }) / 直接简写成对象 { }

// 直接简写成对象 {} - 此时 Vue 会在底层帮你调用 Vue.extend
const school = {
    data() {
        return { name: "SCNU", address: "GZ" }
    },

    template: `
        <div>
            <p>name: {{name}}</p>
            <p>address: {{address}}</p>
        </div>`,
}

几个注意点：

1. 关于组件名：
   1. 一个单词组成的：school / School
   2. 多个单词组成的：my-school / MySchool (需要脚手架支持，因为 HTML 不区分大小写)
2. 关于组件标签：不要使用 HTML 中已有的标签，eg：h1、div、header、footer…
   1. 双标签 <school></school>
   2. 单标签 <school /> (不使用脚手架时，单标签会导致后续组件不能渲染)
3. 可以使用 name 配置项指定组件在开发者工具中的名字

const school = Vue.extend({ name: "School" });

template - 组件的模版

• [ template 配置项 ] 的值可以是 [ HTML 结构字符串 ]

• [ template 配置项 ] 的值也可以是 [ CSS 选择器字符串 ]，此时需要配合 [ template 标签元素 ] 使用

  template 标签元素本身不会被渲染到页面中，只有里面的内容会渲染

<div id="app">
    <school></school>
</div>

<!-- 通过 template 标签设置组件的模板 -->
<template id="school">
    <div>This is school component</div>
</template>

const school = {
    // 通过 CSS 选择器指定组件的模版
    template: "#school"
};

const vm = new Vue({
    el: "#app",
    components: { school }
});

组件的嵌套使用

<div id="app"></div>

// 先定义子组件 student
const student = Vue.extend({
    template: `<div> student </div>`
});

// 再定义父组件 school
const school = Vue.extend({
    template: `
    <div>
        <p> school </p>
        <student></student>
    </div>`,
    // 注册组件 student
    components: { student }
});

const vm = new Vue({
    el: "#app",
    template: `
    <div id="app">
        <p> vm </p>
        <school></school>
    </div>`,
    // 注册组件 school
    components: { school }
});

组件的注册：局部注册 & 全局注册

• 局部注册：在 Vue 实例的配置对象中，设置 components 配置项

  只能在当前 vm 内使用

const vm = new Vue({
    el: "#app",
    // 局部注册: components: { 自定义组件名: 组件对象 }
    components: { school } // 这里使用对象的简写形式 { school: school } → { school }
});

• 全局注册：使用 Vue.component(自定义组件名, 组件对象)

  所有 vm 都可以使用

// 全局注册：Vue.component(自定义组件名, 组件对象);
Vue.component("school", school);

使用脚手架

创建组件

在脚手架中，一般情况下，一个文件就是一个组件：

<template>
    <!-- 这里就是组件模版 -->
    <div>
        <h1>This is an about page</h1>
    </div>
</template>

<script>
export default {
    name: "About", // 设置组件名称，为了方便维护，一般与文件名一样
};
</script>

注册组件：局部注册 & 全局注册

• 局部注册：创建好组件后，即可在需要该组件的地方引入、并注册组件

  设置 components 配置项 - { 自定义组件名称: 组件实例 }

<template>
    <div>
        <Son />
    </div>
</template>

<script>
import Son from "@/pages/Home/Son";

export default {
    name: "Home",
    components: { Son } // 注册组件（局部注册）
};
</script>

• 全局注册：全局组件需要在项目的入口文件中注册；注册完后，即可直接在其他组件(页面)中使用

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// 注册组件（全局注册）
import Son from '@/pages/Home/Son' // 引入组件
Vue.component(Son.name, Son); // Vue.component(自定义组件名称, 组件实例)、

new Vue({ render: h => h(App) }).$mount('#app')

关于 VueComponent

1. 组件本质是一个名为 VueComponent 的构造函数，且不是程序员定义的，是 Vue.extend(option) 生成的
2. 使用组件时，我们只需写 <组件名></组件名>，Vue 解析时就会帮我们创建组件实例
   即：Vue 帮我们执行的 new VueComponent(option) 即 Vue.extend(option)
3. 特别注意：每次调用 Vue.extend(option)，返回的都是一个全新的 VueComponent ！！！
4. 关于 this 指向：
   1. Vue.extend(options) 配置中：methods 中的函数、watch 中的函数、computed 中的函数
      它们的 this 均是 [ VueComponent 实例对象 ]
   2. new Vue(options) 配置中：methods 中的函数、watch 中的函数、computed 中的函数
      它们的 this 均是 [ Vue 实例对象 ]
5. VueComponent 的实例对象 (vc)，就是组件实例对象
   Vue 的实例对象 (vm)，管理着组件实例对象 vc

VueComponent.prototype.__proto__ == Vue.prototype

// 定义组件 school，返回 VueComponent 构造函数
const school = Vue.extend({
    template: `<p> school </p>`,
});

console.log("验证一下: ", school.prototype.__proto__ === Vue.prototype); // 验证一下: true

• 所以，组件实例对象 (vc) 可以访问到 Vue 原型上的属性、方法

<div id="app">
    <school></school>
</div>

Vue.prototype.num = 10;

const school = Vue.extend({
    template: `<button @click="showNum"> 点击获取 num </button>`,
    methods: {
        showNum() { console.log(this.num) }
    },
});

const vm = new Vue({
    el: "#app",
    components: { school }
});

$nextTick

• this.$nextTick(callback)：下一次 DOM 更新结束后，执行回调函数 callback
• Vue 在执行函数时，会将函数执行完 再更新 DOM。有时我们需要更新完数据后，立即操作更新后的 DOM，就需要使用 $nexttick

<template>
    <div>
        <button ref="btn" @click="changeAndShow">{{ name }}</button>
    </div>
</template>

<script>
export default {
    name: "App",
    data() {
        return { name: "superman" };
    },
    methods: {
        changeAndShow() {
            this.name = "super"; // 修改数据，DOM 会被重新渲染

            // 直接获取，只能获取到旧的 innerHTML
            console.log("innerHTML", this.$refs.btn.innerHTML); // innerHTML superman

            // 通过 $nextTick 获取，才能获取到新的 innerHTML
            this.$nextTick(() => {
                console.log("nextTick", this.$refs.btn.innerHTML); // nt innerHTML super
            });
        },
    },
};
</script>

demo 2

• contenteditable：属性值为布尔值，true-该标签内容可编辑、false-该标签内容不可编辑

<template>
    <div>
        <button @click="inFocus">点击聚焦</button>
        <input type="text" ref="input" />
        <hr />
        <button @click="spFocus">点击聚焦</button>
        <span :contenteditable="bol" ref="span"></span>
    </div>
</template>

<script>
export default {
    name: "App",
    data() {
        return { bol: false };
    },
    methods: {
        inFocus() {
            this.$refs.input.focus();
        },
        spFocus() {
            this.bol = true;

            // 错误示范：直接调用 focus()
            // this.$refs.span.focus();
            // 在第一次点击 span 对应的聚焦时，不会有聚焦效果。因为虚拟 DOM 尚未渲染到页面上

            // 方法1：使用定时器
            // setTimeout(() => { // 要用 [箭头函数]，否则 this 指向 Window
            //     this.$refs.span.focus();
            // }, 200);

            // 方法2：使用 nextTick
            this.$nextTick(() => { // 不论用 [箭头函数] 还是 [普通函数]，this 都指向当前 Vue 实例
                console.log(this);
                this.$refs.span.focus();
            });
        },
    },
};
</script>

<style>
* {
    margin: 2px;
}
</style>

demo3

情景假设：页面一开始需要发送 Ajax 获取数据，等数据请求被成功响应、且 HTML 结构渲染完成之后，创建 Swiper 实例
（Swiper 是制作轮播图的插件）

watch: {
    // 监听 bannerList 的数据变化，数据发生变化，就说明请求被成功响应了
    bannerList: {
        handler() {
            // HTML 渲染完成之后
            this.$nextTick(() => {
                // 创建 swiper 实例
                new Swiper(".swiper-container", {
                    loop: true,
                    pagination: {
                        el: ".swiper-pagination",
                        clickable: true,
                    },
                    navigation: {
                        nextEl: ".swiper-button-next",
                        prevEl: ".swiper-button-prev",
                    },
                });
            });
        },
    },
},

• 在 Vue 中，可以通过 watch + $nextTick 保证请求被成功响应、且 HTML 结构渲染完成之后，再创建 Swiper 实例