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
            }
        })

页面中