[JavaScript知识库]Record视频笔记 / VUE / Part2 组件 / 单文件&非单文件组件

一、组件定义

????????实现应用中局部功能代码和资源的集合? （html、css、javascript、image等），以实现代码的复用，简化项目编码，优化效率

二、组件使用

单文件组件?

xxx.vue

<template>
????????<!--组件的结构 ?-->
</template>

<script>
????????// 组件交互相关的代码（数据、方法...）
</script>

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

非单文件组件

1、创建组件 —— vue.extend(options)

Notice：与创建实例对象（new vue(options)）时传入的配置项options有所区别

（vc与vm区别）

? ? ? ? 1、el不写

? ? ? ? 2、data为函数式（data(){}），return所有data里的属性

? ? ? ? “template”配置组件的框架结构

?Example：或简写为const school =? { }

//创建一个school组件
const school = Vue.extend({
    //el: '#root',    //组件定义时，不写el配置项
    template: `
        <div>
            <h2>学校名称：{{ schoolname }}</h2>
            <h2>学校地址：{{ address }}</h2>
        </div>`,
    data() {   //函数式
        return {
            schoolname: "西安市**学校",
            address: "**路"
                }
            }
        })

Notice：VueComponent
1、school组件实际上是vue.extend生成的一个名为VueComponent的构造函数（vue自身定义）

2、每次调用vue.extend，会生成一个全新的VueComponent（）

3、每一个组件标签都会创建一个组件实例对象，会执行new.VueComponent（options）

4、组件配置（data函数、methods里的函数、watch里的函数、computed里的函数）中this指向VueComponent实例对象

?2、注册组件

局部注册：创建组件实例时传入components配置项

全局注册：Vue.component('组件名', 组件)

Example：?

new Vue({
    el: '#root',    
    //注册组件（局部）
    components: {
         xuexiao: school
            }
        })

    //注册组件（全局）
    Vue.component('xuexiao', school)

?组件名通常为单个单词组成 或 多个单词组成（使用“-”或驼峰命名加以区别），组件名尽可能避免html中已有的元素名称。

?3、使用组件（写组件标签）

Example：?

<div id="root">
    <!-- 编写组件标签 -->
    <xuexiao></xuexiao>
</div>

也可写做<xuexiao/>（后果：不使用脚手架时，会导致后续组件不可渲染）

嵌套组件：

? ? ? ? 1、二级组件定义时常规写，级别越小的组件越先定义

? ? ? ? 2、高级组件的内部components配置项内罗列下级组件名称，且template内部添加下级组件标签

? ? ? ? 3、组件嵌套时尽可能做到逻辑清晰，层级分明，最好用一个大组件包含。

三、组件案例总结

1、组件化编码流程

（1）拆分静态组件：将一个页面按功能，板块化拆分为一个个具有特定功能集合的组件，注意命名不要与html冲突（例如header ×）

（2）实现动态组件：组件之间的公共数据可以存放在他们共同的父组件身上，非公共数据放在自身即可

（3）实现交互：绑定事件（事件在组件之间进行有效传递）

2、props适用于：

子组件 向 父组件 传递信息，要求父先给子组件一个函数，子组件在调用此函数

父组件 向 子组件 传递信息

3、v-model：绑定的值不可以是props传过的值，由于props传的值不可修改