Vue | 31.尚硅谷补充 - 组件的使用 - 非单文件组件

0.参考视频

p54 非单文件组件

1.概述

• 非单文件组件：一个文件包含有n个组件

• 单文件组件：一个文件只包含有1个组件，后缀为==.vue==

• 创建组件时一定要定义模板template

• 注册组件用components属性，嵌套组件时也可以在组建中定义components

• 使用组件时，用<组件名> </组件名>

2.基础铺垫

开始对非单文件组件的学习前，需要对前面的一些基础内容进行补充说明

2.1.data的两种写法

1. 对象式：将属性定义在data对象中

   

2. 函数式：写一个函数，通过return，将含有属性的data对象返回

   

2.2.写法区别：

• 第一种写法：调用其中数据时，引用了对象
• 第二种写法：调用其中数据时，引用了函数，通过函数新建一个对象

区别就在于：假设A、B两个线程同时在用data，第一种写法的两个线程，引用的会是同一个对象；第二种写法的两个线程，引用的是同一个函数，但返回的是不同的对象。关于这点，参考文章：25.值与对象

最关键的是：组件中只能用函数式

3.创建组件

3.1.定义数据

在<script>中，通过调用Vue的component方法来定义组件：

Vue.extend(obj)

参数是一个对象，定义方式：

obj: {
    data(){
        return {
            studentName: "zs",
            studentSex: 1
        }
    }
}

整合上述的代码，格式就变成了：

//创建组件，将该组件对象赋给student引用：
let student = Vue.extend({
    data(){
        return {
            studentName: "zs",
            studentSex: 1
        }
    });

3.2.定义模板

组件三大要素：html、css、js，其中html是必须要有的。因此一个组件必须要有html元素，定义在template属性中：

需要注意以下两点:

• 用单引号包裹template的内容，内容就可以换行
• template属性中只能有一个html元素(标签)，但可以有多个子元素

4.注册组件

声明Vue实例，定义components属性：

冒号左边就是最终确定的组件名，右边则是在上一步定义的组件的引用。当然，通常情况下这二者应当是一样的，这里为了演示特地进行了改动

当然，这里可以注册多个组件

5.使用组件

编写组件标签来使用组件，格式为<组件名> </组件名>