vue自定义组件与注册

组件分为两种：路由组件、非路由组件。

路由组件：
　必须在router文件夹下的index.js中注册。
　一般存放在src的view文件夹下。

非路由组件：
　没有在路由中注册，一般放在src的component文件夹下。

不管是路由组件还是非路由组件，在使用的地方都要使用import导入该组件。

如果是非路由组件则需要再export中指定一下。
例如：

import AddSubject from "../../components/AddSubject";
  
export default {
        components: {AddSubject},
        data() {
}

　

组件注册:

Vue.component(组件名称，{
   data:function(){
      return{ 
         属性名:属性值
      }
   }，
    template:要注册的组件，可以是一个.vue文件，也可以是一个template字符串,
    method:{
        handle:function(){}
    }
})

在html代码中就可以直接使用:<组件名称>

定义组件注意事项

1，template中只能有一个根节点。

例如：

Vue.component(“test-component”，{
   data:function(){
      return{ 
         属性名:属性值
      }
   }，
   //错误使用方式，在template包含了两个根节点
    template:"
aaa
bbb
",
    //改成 template:"
  
aaa
bbb
  
",就可以了
    method:{
        handle:function(){}
    }
})

2，使用Vue.component注册的组件data必须是一个函数。
例如：

3，template可以使用斜单引号(es6语法)包裹html代码。

例如：

Vue.component(“test-component”，{
   data:function(){
      return{ 
         属性名:属性值
      }
   }，
   //es6的语法，可以使用符号 ` `
    template:
    `
    	

			“这是一段话”
		
	`，
      method:{
        handle:function(){}
    }
})

4，驼峰式命名的组件只能在斜单引号(es6语法)引用这个组件，如果在模板html代码标签中，只能使用短横线方式。

例如:

Vue.component(“test-component”，{
   data:function(){
      return{ 
         属性名:属性值
      }
   }，
   //es6的语法，可以使用符号 ` `
    template:
    `
    	//这里可以使用驼峰命名方式的自定义组件，如果是在创建出来的.vue文件中的