這篇文章主要介紹“VUE組件如何創(chuàng)建、渲染、及注冊(cè)”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“VUE組件如何創(chuàng)建、渲染、及注冊(cè)”文章能幫助大家解決問(wèn)題。

創(chuàng)新互聯(lián)-專(zhuān)業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性?xún)r(jià)比呼倫貝爾網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式呼倫貝爾網(wǎng)站制作公司更省心,省錢(qián),快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋呼倫貝爾地區(qū)。費(fèi)用合理售后完善，10年實(shí)體公司更值得信賴(lài)。

組件的創(chuàng)建

創(chuàng)建組件用Vue.extend()

創(chuàng)建的組件不要寫(xiě)el因?yàn)樽罱K所有的組件都要被vm管理，由vm決定服務(wù)的對(duì)象

date不能寫(xiě)對(duì)象形式而是寫(xiě)成函數(shù)形式，且其中一定要return一個(gè)對(duì)象

// 創(chuàng)建一個(gè)組件
const school=Vue.extend({
    // 配置template，里面存放的是通過(guò)當(dāng)前組件中的內(nèi)容生成的標(biāo)簽，最終會(huì)作為模板在頁(yè)面中解析出來(lái)
    template:`
            
            

                
                
我的名字:{{name}}
                
地址:{{adress}}
            
`,
   // 配置date
      data(){
        return{
            name:'z',
            adress:'earth'            
             }
        }
})

注意：在全局環(huán)境下使用Vue.entend({})創(chuàng)建的組件，在不使用Vue.component('組件名',最終組件名)聲明時(shí)，就是局部組件，不可以被其他vm實(shí)例使用，如果使用了Vue.component創(chuàng)建的組件時(shí)為全局組件（Vue.entend可以省略，直接const 組件名={ }）

組件的渲染

當(dāng)組件注冊(cè)完成之后，在頁(yè)面中vm服務(wù)的el內(nèi)使用，使用方式就是將最終組件名作為一個(gè)標(biāo)簽放到想要的位置等待瀏覽器解析即可

const vm=new Vue({
        el:'root',
        components:{
            // 注冊(cè)組件
            sl:school
            }
        })

頁(yè)面中