Vue 元件用法

Ozzie發表於2019-12-17
Vue元件

本文綱領：

  • 介紹 Vue元件 的相關概念
  • 詳解 Vue元件 的用法

Vue元件 ：介紹

  1. 官方文件：元件應用化構建
  2. 什麼是元件：元件（Component）是 可複用的Vue例項，是Vue最強大的功能之一，元件可以擴充HTML元素，封裝可重用的程式碼（包括html、css、js）。在較高層上時，元件是自定義元素，Vue編譯器為它提供特殊的功能，總結起來就是：元件是完成特定功能的一套自定義的HTML標籤。可以將其理解為預先定義好的 ViewModel類。
  3. 一個元件可以預先定義很多內容，但是最核心的有：
    • 模板（template）：模板反映了資料和最終展現給使用者的DOM之間的對映關係，也就是我們要複用的 HTML模板
    • 初始資料（data）：一個元件的初識資料狀態，對於可重用的元件來說，通常是私有的。
    • 接收的外部的引數（props）：元件之間可以通過引數來進行資料的傳遞和共享，引數預設是單向繫結，但也可以實現雙向繫結。
    • 生命週期（鉤子函式）：一個元件會觸發多個生命週期函式，在這些鉤子函式中可以封裝一些自定義邏輯。
  4. 元件的分類：
    • 全域性元件、區域性元件、巢狀元件、單檔案元件

元件三步曲：定義、註冊、使用

全域性元件

  1. 簡單介紹全域性元件：
    • 全域性元件即為所有的 Vue例項 都可以使用的元件。
    • 註冊全域性元件的方法： 
       Vue.component('元件名',{
      '模板和方法'
 }) //注意:元件名不要有大寫字母，多個單詞使用中劃線 '-'隔開
    • 元件的template模板必須有且僅有一個根標籤，即在template中，所有的內容都要用一個標籤包裹起來。
    • 應用場景：若該元件的功能需在任何被Vue例項掛載的標籤中引用，則建議用全域性元件
    • 注意：全域性元件必須寫在Vue例項建立之前，才會在引用中生效，否則會報錯
  2. 全域性元件的三種用法： 
     <!DOCTYPE html>
 <html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!-- 匯入Vue包 -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <!-- 元件三部曲：定義、註冊、引用 -->
        <h1>全域性元件</h1>
        <hr >
    <!-- ======================= 引用全域性元件:方式1 ======================= -->
        <div id="A">
            <compon1></compon1> <!--使用-->
            <hr >
        </div>
        <script type="text/javascript">
            Vue.component('compon1', {  //註冊
                template: '<h2>引用全域性元件:方式1</h2>' //定義
            })
            var A = new Vue({
                el: '#A',
            })
        </script>
    <!-- ======================= 引用全域性元件:方式2 ======================= -->
        <div id="B">
            <compon2></compon2> <!--使用-->
        </div>
        <script type="text/template" type="text/javascript" id="compon2">
        /* 定義元件(這個div是根標籤) */
            <div>
                <h2>引用全域性元件:方式2</h2>
                <p>我是通過'script'標籤定義的</p>
                <hr >
            </div>
        </script>
        <script type="text/javascript">
            Vue.component('compon2',{   //註冊
                template: '#compon2',   //定義
            })
            var B = new Vue({
                el: '#B',
            })
        </script>
    <!-- ======================= 引用全域性元件:方式3 ======================= -->
        <div id="C">
            <compon3></compon3> <!--使用-->
        </div>
        <template id="compon3">
            <!-- 定義(這個div是根標籤) -->
            <div>
                <h2>引用全域性元件:方式3</h2>
                <p>我是通過'template'標籤定義的</p>
                <hr >
            </div>
        </template>
        <script type="text/javascript">
            Vue.component('compon3',{   //註冊
                template: '#compon3'    //定義
            })
            var C = new Vue({
                el: '#C',
            })
        </script>
    </body>
 </html>

區域性元件

  1. 簡單介紹區域性元件：
    • 個人認為區域性元件的優點是相對於全域性元件而言的，例如，當你使用 webpack 這樣的構件系統時，如果註冊的是全域性元件，就意味著不管你是否使用，此元件都會存在於你構件的系統中，造成無謂的 js載入，而區域性元件只需要在你的根例項裡面去呼叫這個定義的元件即可。
    • 與全域性元件一樣，元件的template模板必須有且僅有一個根標籤，即在template中，所有的內容都要用一個標籤包裹起來。
  2. 區域性元件的三種用法： 
     <!DOCTYPE html>
 <html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!-- 匯入Vue包 -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <!-- 元件三部曲：定義、註冊、引用 -->
        <h1>區域性元件——定義在某個Vue例項上的</h1>
        <hr >
    <!-- ======================= 引用區域性元件:方式1 ======================= -->
        <div id="A">
            <compon1></compon1> <!--引用-->
            <hr >
        </div>
        <script type="text/javascript">
            var A = new Vue({
                el: '#A',
                components: { //註冊
                    'compon1': { //定義
                        template: '<h2>引用區域性元件:方式1</h2>'
                    }
                }
            })
        </script>
    <!-- ======================= 引用區域性元件:方式2 ======================= -->
        <div id="B">
            <compon2></compon2> <!--引用-->
            <hr >
        </div>
        <script type="text/template" id="compon2">
            //定義元件(這個div是根標籤)
            <div>
                <h2>引用區域性元件:方式2</h2>
                <p>我是通過'script'標籤定義的</p>
            </div>
        </script>
        <script type="text/javascript">
            var B = new Vue({
                el: '#B',
                components: { //註冊
                    'compon2': { //定義
                        template: '#compon2'
                    }
                },
            })
        </script>
    <!-- ======================= 引用區域性元件:方式3 ======================= -->
        <div id="C">
            <compon3></compon3> <!--引用-->
            <hr >
        </div>
        <template id="compon3">
            <!-- 定義元件(這個div是根標籤) -->
            <div>
                <h2>引用區域性元件:方式3</h2>
                <p>我是通過'template'標籤定義的</p>
            </div>
        </template>
        <script type="text/javascript">
            var C = new Vue({
                el: '#C',
                components: { //註冊
                    compon3: { //定義
                        template: '#compon3',
                    }
                }
            })
        </script>
    </body>
 </html>

元件巢狀

  1. 簡介：如下圖所示，元件之間是可以相互巢狀的：
    在這裡插入圖片描述
  2. 父元件中巢狀子元件的方法： 
     <div id="container">
    <h3>我愛吃什麼水果有這些：</h3>
    <ol>
        <todolist></todolist> <!-- 引用 -->
    </ol>
 </div>
 <script type="text/javascript">
    //定義子元件
    var child = Vue.extend({
        template: "<div>巢狀的子元件</div>",
    });
    //定義父元件
    var todolist = Vue.extend({
        template:'<div><li v-for="item in datas">{{item.text}}</li><child></child></div>',
        data(){
            return{
                datas: [
                    { id: 0, text: '蘋果' },
                    { id: 1, text: '香蕉' },
                    { id: 2, text: '雪梨' },
                ]
            }
        },
        components: {
            'child': child,
        }
    });
    //定義一個Vue例項
    var app = new Vue({             
    el: '#container',
        data: {},
        components: { //註冊(當然也可以用"Vue.component('todolist',todolist);"全域性註冊)
            'todolist': todolist,
        }
    })
 </script>
    • 注意：在使用子元件之前必須先定義子元件，否則會報錯
  3. 元件中的資料必須是函式，元件中的資料的定義為： 
    '元件名':{
    template: "...",
    data: function(){
        return {
            鍵 : 值,
        }
    }
}
    • 為什麼這裡的data的值是一個函式呢，因為我們這裡定義的元件很有可能被複用，如果像普通的一個Vue例項，那麼改動一個地方，就會引起整個元件的改變
      但是我們每次複用組建的情況都可能不同，所以用一個function來返回物件
      • 換句話說，元件的data是私有的，該data中的資料只能在對應的元件模板中使用

相關文章