vue-子组件创建/注册/使用流程

流程分为三步

 

非单文件组件:(实际不用,因为很麻烦,框架都是单文件组件)

局部注册

1.创建一个组件

const school = Vue.extend({
   // 传入配置对象
   // 子组件配置对象不要写el,根据vm引入作用到对应区域
   //  data属性需要写成函数
   template:``,
　　name:'school',
   data(){
       return {
          // 返回需要的data对象,因为data函数返回值是一个新的拷贝,而data对象是共同引用
        } 
    } 
})    

2.注册该组件

// 在vm实例的配置对象中加入components属性

new Vue({
   components:{
       School:school,
       Student:student  
// 最好是直接简写
       school,
    } 
})

3.在需要的模板中使用组件标签

注册后就可以复用这些组件

// 标签名就是组件名 
<School></School>

 

注意事项:

(1)全局注册的方法

//调用component方法
Vue.component('hello',hello) 
参数为 组件标签名,组件名

 (2)组件标签名的命名规范

方法1:
//单个单词,首字母大写
<School>

//多个单词,多单词首字母大写
<MySchool>

方法2:
//全小写
<school>

//全小写 - 间隔
<my-school>

 (3)组件名在vue开发者工具中的识别

在组件配置项中的name属性决定,name没写则选择注册中的组件标签名

 (4)组件标签的简写-自闭合

<school/>
//注意必须在脚手架下书写

(5)子组件创建的简写方式

单文件组件不写extend()

//直接传入配置对象
const school = {
  // options 配置对象
}

//在components属性中,vue会判断是否是传入配置对象,还是vue.extend()处理后的结果,如果是前者会后台调用extend()方法进行处理,所以实际是vue对于程序员编写的一种方便优化