VUE组件如何创建、渲染、及注册
这篇文章主要介绍“VUE组件如何创建、渲染、及注册”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“VUE组件如何创建、渲染、及注册”文章能帮助大家解决问题。
创新互联-专业网站定制、快速模板网站建设、高性价比呼伦贝尔网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式呼伦贝尔网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖呼伦贝尔地区。费用合理售后完善，10年实体公司更值得信赖。
组件的创建
创建组件用Vue.extend()
创建的组件不要写el因为最终所有的组件都要被vm管理，由vm决定服务的对象
date不能写对象形式而是写成函数形式，且其中一定要return一个对象
// 创建一个组件
const school=Vue.extend({
// 配置template，里面存放的是通过当前组件中的内容生成的标签，最终会作为模板在页面中解析出来
template:`
我的名字:{{name}}
地址:{{adress}}
`,
// 配置date
data(){
return{
name:'z',
adress:'earth'
}
}
})注意：在全局环境下使用Vue.entend({})创建的组件，在不使用Vue.component('组件名',最终组件名)声明时，就是局部组件，不可以被其他vm实例使用，如果使用了Vue.component创建的组件时为全局组件（Vue.entend可以省略，直接const 组件名={ }）
组件的渲染
当组件注册完成之后，在页面中vm服务的el内使用，使用方式就是将最终组件名作为一个标签放到想要的位置等待浏览器解析即可
const vm=new Vue({
el:'root',
components:{
// 注册组件
sl:school
}
})页面中
Document
总结：vm实例相当于起了一个桥梁作用，使得组件中的内容最终会被展现在页面上，这样提高了代码的利用率，当我们需要重复使用某一个内容时，可以直接找到这个内容所在的组件，然后将组件注册到实例上即可在页面中展示。
Vue的组件注册
1、全局注册：当Vue创建，组件就会被加载，不管该组件使不使用，都会被加载【占内存】【入门程序】
2、局部注册：当我们使用到某个组件，该组件才会被创建，如果不使用该组件，那么该组件不会被创建
创建vm，配置el（决定components中的组件为谁服务）
配置components对象，其中元素以key，value存储，key是在当前实例中的组件名（最终组件名）,value是我们在全局环境下配置的组件名
全局注册
Vue.component("button-a",{
template:"\n" +
" {{count}}",
data:function () {
return{
count:0
}
},
methods:{
}
})局部注册
let componentA = {
template:"\n" +
" {{count}}",
data:function () {
return{
count:0
}
},
methods:{
}
}
new Vue({
el:"#app",
components:{
"component-a":componentA,
}
})关于data为什么是一个函数
组件注册优化
在组件中编写html结构时，来回复制黏贴，非常麻烦，也很占内存。解决办法是在html里用模板编写，并且和js分离
1、模板需要写在template标签中，template标签写在容器外部
2、在template标签中只能有一个根标签
