VUE元件的建立、渲染、及註冊（總結分享）

本篇文章為大家帶來了關於vue的相關知識，其中主要介紹了關於組件的創建、渲染以及註冊的相關問題，創建的組件不要寫el因為最終所有的組件都要被vm管理，由vm決定服務的對象，下面一起來看一下，希望對大家有幫助。

【相關推薦：javascript影片教學、vue.js教學】

元件的建立

建立元件用Vue.extend()

建立的元件不要寫el因為最終所有的元件都要被vm管理，由vm決定服務的物件

date不能寫物件形式而是寫成函數形式，並且其中一定要return一個物件

// 创建一个组件
const school=Vue.extend({
    // 配置template，里面存放的是通过当前组件中的内容生成的标签，最终会作为模板在页面中解析出来
    template:`
            <!--最外层为template必须具有的根标签-->
            <div>
                <!--div中的标签会在页面中使用到该组件的地方解析并显示出来，那么name就是此组件中                    
                  data中配置的name，adress同理-->
                <h1 id="我的名字-name">我的名字:{{name}}</h1>
                <h2 id="地址-adress">地址:{{adress}}</h2>
            </div>`,
   // 配置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
            }
        })

頁面中

nbsp;html>


    <meta>
    <meta>
    <meta>
    <title>Document</title>
    <script></script>


    <div>
        <!-- 用组件标签将想用的组件放到页面上,那么组件中template属性中的标签就会在这个位置被解析出来-->
        <sl></sl>
    </div>

總結：vm實例相當於起了一個橋樑作用，使得元件中的內容最終會被展現在頁面上，這樣提高了程式碼的利用率，當我們需要重複使用某一個內容時，可以直接找到這個內容所在的元件，然後將元件註冊到實例上即可在頁面中展示。

Vue的元件註冊

1、全域註冊：當Vue創建，元件就會被加載，不管該元件使不使用，都會被載入【佔記憶體】【入門程式】

2、局部註冊：當我們使用到某個元件，該元件才會被創建，如果不使用該元件，那麼該元件不會被創建

#創建vm，配置el（決定components中的元件為誰服務）

配置components對象，其中元素以key，value存儲，key是在當前實例中的元件名（最終元件名稱）,value是我們在全域環境下配置的元件名稱

全域註冊

    Vue.component("button-a",{
        template:"\n" +
            "    <button>{{count}}</button>",
        data:function () {
            return{
                count:0
            }
        },
        methods:{

        }
    })

局部註冊

    let componentA = {
        template:"\n" +
                "    <button>{{count}}</button>",
            data:function () {
                return{
                    count:0
                }
            },
            methods:{
 
            }
    }
    new Vue({
        el:"#app",
        components:{
            "component-a":componentA,
        }
    })

關於data為什麼是一個函數

## 元件註冊優化

在元件中寫html結構時，來回復制粘貼，非常麻煩，也很佔記憶體。解決辦法是在html裡用模板編寫，並且和js分離

1、模板需要寫在template標籤中，template標籤寫在容器外部

2、在template標籤中只能有一個根標籤

    <div>
        <button-color></button-color>
    </div>
    <template>
        <div>
            <h1 id="组件">组件</h1>
            <h2 id="阿萨德">阿萨德</h2>
        </div>
    </template>

以上是VUE元件的建立、渲染、及註冊（總結分享）的詳細內容。更多資訊請關注PHP中文網其他相關文章！