24 非单文本组件(用的少)
在vue中，组件是有两种编写格式的，第一种格式叫非单文本组件，第二种格式叫单文本组件
非单文本组件：一个文件中含有多个组件，也叫多文本组件，比如demo.html里面包含js,css...
单文本组件（使用较多）：一个文件中只有1个组件，一个文件只有一个组件，是一一对应的,比如demo.vue
注意： 非单文本组件在开发中用的比较少，一般用单文本组件比较多，但是它可以让我们学到很多东西，还是值得学习的
24.1 编写例子
编写代码，实现一个小例子
看下效果，虽然没有报错，但是总觉得不太好，如果能够给上面的信息单独写一个叫school的组件，给下面的写一个叫student组件，感觉会好很多
下面就通过vue去创建组件
24.2 创建组件(extend)
在vue中，创建组件的api叫extend(扩展) 注意：没有s，不是extends!
它是一个函数，需要调用，并且调用的时候要传入一个配置对象，在配置对象里面可以配置很多东西。这些东西都是用来控制组件相关内容的，和vm写法几乎一样的
// 创建组件 const school=Vue.extend({})
这里我直接把vm中的对象属性复制使用，但是报错了
报错提示，这些属性只能在new vue的时候使用
组件定义时不需要指定el配置项，因为最终所以的组件都要被一个vm管理，由vm决定服务于哪个容器
注释掉el，再次查看页面，发现少了一个错误信息，但是还有一个错误，说的是不要把data直接写成一个对象，而是要写成一个函数，函数里面写data想返回的对象
使用组件时，data必须写成函数式！并且要写成普通函数！
这时候查看页面，没有任何报错信息了
对应的，把管理学生的组件也创建出来
这样组件就创建完成了
24.3 使用组件
创建组件只需要使用extend即可，但是想使用组件需要分为三步
1 创建组件(extend)
第一步已经完成，接下来进行第二步
2 注册组件(components)
因为不同的组件数据在对应的组件里面，那么vm中的data就不需要了
这时候需要用到一个全新的配置项：components
注册组件,里面是一组一组的key,value组合 key就是组件名，在这里面key才是决定性的组件名称，创建组件的时候的名称只是一个中转，如果key和创建时候名称一样，那么可以只写key
组件中需要有自己的元素，所以要配置template模板。最好使用模板字符串的引号 (Tab上面那个键在英文输入法下按两下）这样可以随意换行，一般需要一个根容器(div)把元素进行包裹
到了这里，才是一个有意义的组件了，有自己的模板和数据项，然后就可以被vm使用了
3 使用组件
使用组件，编写组件标签
查看页面，正常显示，说明组件正常使用了
到这样组件的定义，以及注册，使用就完成了，注意：上面用的是局部注册
24.4 新增其他属性
如果想在组件模板中新增其他属性，直接在对应的组建中添加即可
比如我想在学校组件中新增一个按钮，点击的时候提示学校名称，像vm一样直接编写即可
24.5 全局组件
全局组件用的并不多，想对来说局部组件用的更多，但是还是有必要学下
上面注册的组件都是局部的，如果我再创建一个vm里面没有任何组件，使用组件标签
直接报错，没有注册的组件
这时候就要用到全局组件了：component，注意不是components!
// 注册全局组件 Vue.component('student',student)
页面正常了
代码如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>初始vue</title> <!-- 引入vue.js --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <!-- 第三 步：使用组件，编写组件标签 --> <school></school> <hr> <student></student> </div> <div id="root2"> <student></student> </div> </body> <script type="text/javascript"> // 第一步：创建school组件 const school=Vue.extend({ // 模板配置项 最好使用模板字符串的引号 (Tab上面那个键在英文输入法下按两下）这样可以随意换行 // 一般需要一个根容器(div)把元素进行包裹 template:` <div> <h2>学校名称：{{schoolName}}</h2> <h2>学校地址：{{address}}</h2> <button @click='showInfo'>点我告诉你学校名称</button> </div> `, // 组件定义时不需要指定el配置项，因为最终所以的组件都要被一个vm管理，由vm决定服务于哪个容器 // el:'#root', // 使用组件时，data必须写成函数式！并且要写成普通函数！ data(){ return{ schoolName:'清华大学', address:'北京' } }, methods: { showInfo(){ alert(this.schoolName) } }, }) // 第一步：创建student组件 const student=Vue.extend({ // 模板配置项 最好使用模板字符串的引号 (Tab上面那个键在英文输入法下按两下）这样可以随意换行 // 一般需要一个根容器(div)把元素进行包裹 template:` <div> <h2>学生姓名：{{studentName}}</h2> <h2>学生年龄：{{age}}</h2> </div> `, // 组件定义时不需要指定el配置项，因为最终所以的组件都要被一个vm管理，由vm决定服务于哪个容器 // el:'#root', // 使用组件时，data必须写成函数式！并且要写成普通函数！ data(){ return{ studentName:'张三', age:'18' } }, }) // 注册全局组件 Vue.component('student',student) // 创建vm const vm= new Vue({ el:'#root', //第二步：注册组件（局部注册）,里面是一组一组的key,value组合 key就是组件名，在这里面key才是决定性的组件名称 // 创建组件的时候的名称只是一个中转，如果key和创建时候名称一样，那么可以只写key components:{ school, student } }) const vm2= new Vue({ el:'#root2', }) </script> </html>
24.6 总结
