day71-非单文件组件（有意思）

组件

非单文件组件

组件的定义

向外提供一个局部的效果功能的代码集合（html/css/js/image....）

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

组件的创建

分为创建组件，注册组件，使用组件

1. 创建组件

 //创建school组件
 const school = Vue.extend({
     template:`
         <div>
             <h2>名称：{{schoolName}}</h2>
             <h2>地址：{{address}}</h2>
             <button @click="showName">点我提示学校名</button>
         </div>
     `,
     data(){
         return{
             schoolName:'中南大学',
             address:'changsha',
         }
     },
     methods:{
         showName(){
             alert(this.schoolName)
         }
     }
 })

 

template中是html项目

data和methods和正常vue中一样

剩余组件创建：

 //创建student组件
 const student = Vue.extend({
     template:`
     <div>
         <h2>姓名：{{studentName}}</h2>
         <h2>年龄：{{age}}</h2>
     </div>
     `,
     data(){
         return{
             age:18,
             studentName:'张三'
         }
     }
 })
 ​
 //创建hello组件
 const hello =  Vue.extend({
     template:`
     <div>
         <h2>hello {{name}}</h2>
     </div>
     `,
     data(){
         return{
             name:'Tom'
         }
     }
 })

 

2. 注册组件

注册全局组件

 //注册全局组件
 Vue.component('hello',hello)

 

vm中注册组件

 //创建vm
 new Vue({
     el:'#root',
     components:{
         //注册组件（局部注册）
         //组件名，引用位置
         school,
         student
     }
 })

 

3. 使用组件标签

 <div id="root">
     <school></school>
     <hr>
     <student></student>
     <hello></hello>
 </div>

 

4. 总结

 <!--
     vue使用组件的三大步骤
         1.定义组件
         2.注册组件
         3.使用组件
 ​
     1.如何定义组件
         使用Vue.extend（options）创建，其中options和new Vue（options）中几乎一样
         区别如下：
             1.el不要写，所有组件都要经过一个vm进行管理，由vm中的el决定使用服务哪个
             2.data必须写成函数，避免组件被复用时，数据存在引用关系
         备注：使用template可以配置组件结构
     2.如何注册组件
         1.局部注册：new vue时传入components选项
         2.全局注册：vue.component（'组件名',组件位置）
     3.编写组件标签
         <组件名></组件名>
         <school></school>
 -->

 

注意点

<!--
   1.关于组件名：
     一个单词组成：
       首字母小写：school
       首字母大写：School
     多个单词组成：
       kebab-case命名：my-school
       CameCase命名：MySchool（需要vue脚手架支撑）
     备注：
       1.组件名尽可能回避html中已有的元素名称
       2.可以使用name配置项指定组件在开发者工具中呈现的名字
 ​
     2.关于组件标签
       <my-school></my-school>
       <school/>
       备注：不使用脚手架时，<school/>会导致后续组件不能渲染
 ​
     3.简写方式：
       const school = Vue.extend(options)可简写为：const school = options
 -->

 

组件的嵌套

通常我们会设置一个app组件作为组件的汇总，其余组件在app中注册，app在vue中注册，进行一个嵌套。

如果有组件的嵌套也可以分层

 //创建student组件
 const student = Vue.extend({
     template:`
     <div>
         <h2>姓名：{{studentName}}</h2>
         <h2>年龄：{{age}}</h2>
     </div>
     `,
     data(){
         return{
             age:18,
             studentName:'张三'
         }
     }
 })

 

school中嵌套student组件

 //创建school组件
 const school = {
     template:`
         <div>
             <h2>名称：{{schoolName}}</h2>
             <h2>地址：{{address}}</h2>
             <student></student>
         </div>
     `,
     data(){
         return{
             schoolName:'中南大学',
             address:'changsha',
         }
     },
     components: {
         student
     }
 }
 //创建hello组件
     const hello =  Vue.extend({
         template:`
         <div>
             <h2>hello {{name}}</h2>
         </div>
         `,
         data(){
             return{
                 name:'Tom'
             }
         }
     })

 

app组件中汇总所有组件信息，其中student已经在school中注册

最后在vue中注册app组件

 //创建app组件
 const app ={
     template:`
         <div>
           <hello></hello>
           <school></school>
         </div>
     `,
     components:{
         school,
         hello
     }
 }
 new Vue({
     el:'#root',
 ​
     components:{
         //命名
         app
 ​
     }
 })

 

并在html中显示app，其余组件都可以正常显示

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

 

关于VueComponent

<!--
   关于vuecomponent：
     1.school组件本质是一个名为vuecomponent的构造函数，且不是程序员定义的，是vue.extends生成的
 ​
     2.我们只需要写<school></school>或者<school/>，vue解析时会帮我们创建school组件的实例对象
       vue帮我们执行的：new vuecomponent（options）
 ​
     3.每次调用vue.extend，返回的都是一个全新的vuecomponent
 ​
     4.关于this指向
       1.组件配置中：
         data，methods，watch等this均是vuecomponent实例对象
       2.new Vue（）中
         data，methods，watch等this均是vue实例对象
 ​
     5.vuecomponent的实例对象简称vc
       vue实例对象简称vm
 -->

 

内置关系

 console.log(school.prototype.__proto__ === Vue.prototype)

over