Vue 組件系統

来源:https://www.cnblogs.com/wangyueping/archive/2019/09/05/11445766.html
-Advertisement-
Play Games

Vue 組件系統 vue.js既然是框架,那就不能只是簡單的完成數據模板引擎的任務,它還提供了頁面佈局的功能。本文詳細介紹使用vue.js進行頁面佈局的強大工具,vue.js組件系統。 每一個新技術的誕生,都是為瞭解決特定的問題。組件的出現就是為瞭解決頁面佈局等等一系列問題。vue中的組件分為兩種, ...


vue.js既然是框架,那就不能只是簡單的完成數據模板引擎的任務,它還提供了頁面佈局的功能。本文詳細介紹使用vue.js進行頁面佈局的強大工具,vue.js組件系統。

每一個新技術的誕生,都是為瞭解決特定的問題。組件的出現就是為瞭解決頁面佈局等等一系列問題。vue中的組件分為兩種,全局組件和局部組件。

一、全局組件的註冊

通過Vue.component()創建一個全局組件之後,我們可以在一個通過 new Vue 創建的 Vue 根實例中,把這個組件作為自定義元素來使用。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../statics/vue.min.js"></script>
</head>
<body>
  <div id="app">
    <!--第二步,使用-->
    <global_component></global_component>
  </div>
  <script>
    // 第一步,註冊
    Vue.component("global_component", {
      template: `
        <div>
            <h2>Hello Vue</h2>
        </div>
      `
    });

    new Vue({
      el: "#app",
    });
  </script>
</body>
</html>

組件的參數

因為組件是可復用的 Vue 實例,所以它們與 new Vue 接收相同的選項,例如 datacomputedwatchmethods 以及生命周期鉤子等。僅有的例外是像 el這樣根實例特有的選項。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../statics/vue.min.js"></script>
</head>
<body>
  <div id="app">
    <!--第二步,使用-->
    <global_component></global_component>
  </div>
  <script>
    // 第一步,註冊
    Vue.component("global_component", {
      data: function () {
        return {
          count: 0
        }
      },
      template: `<button v-on:click="count++">You clicked me {{ count }} times.</button>`
    });

    new Vue({
      el: "#app",
    });
    
  </script>
</body>
</html>

組件的復用

每個實例維護自己的一份獨立的數據。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../statics/vue.min.js"></script>
</head>
<body>
  <div id="app">
    <!--第二步,使用-->
    <global_component></global_component>
    <global_component></global_component>
    <global_component></global_component>
  </div>
  <script>
    // 第一步,註冊
    Vue.component("global_component", {
      data: function () {
        return {
          count: 0
        }
      },
      template: `<button v-on:click="count++">You clicked me {{ count }} times.</button>`
    });

    new Vue({
      el: "#app",
    });
    
  </script>
</body>
</html>

註意當點擊按鈕時,每個組件都會各自獨立維護它的 count。因為你每用一次組件,就會有一個它的新實例被創建。

Data必須是一個函數

data必須是一個函數,因此每個實例可以維護一份被返回對象的獨立的拷貝, 也可以寫成如下形式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../statics/vue.min.js"></script>
</head>
<body>
  <div id="app">
    <!--第二步,使用-->
    <global_component></global_component>
    <global_component></global_component>
    <global_component></global_component>
  </div>
  <script>
    // 第一步,註冊
    Vue.component("global_component", {
      data(){
        return {
          count: 0
        }
      },
      template: `<button v-on:click="count++">You clicked me {{ count }} times.</button>`
    });

    new Vue({
      el: "#app",
    });

  </script>
</body>
</html>


二、局部組件的註冊

全局註冊往往是不夠理想的。比如,如果你使用一個像 webpack 這樣的構建系統,全局註冊所有的組件意味著即便你已經不再使用一個組件了,它仍然會被包含在你最終的構建結果中。這造成了用戶下載的 JavaScript 的無謂的增加。

全局組件始終是存在的,除非程式結束,如果組件越來越大,那麼程式所占用的空間和消耗的性能就會更大。


局部組件的第一種使用方式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../statics/vue.min.js"></script>
</head>
<body>
  <div id="component-demo">
    <!--最後在根元素當中使用它-->
    <!--第一種使用方式,會把當前div渲染進DOM-->
    <my-header></my-header>
  </div>
  <script>
    // 定義一個局部組件,其實就是一個變數,它是一個object類型
    // 屬性與全局組件是一樣的
    let Header = {
      template: `
        <button @click="count++">{{ count }}</button>
      `,
      data() {
        return {
          count: 0
        }
      }
    };

    new Vue({
      el: "#component-demo",
      // 第二部,需要在根實例當中使用它
      components: {
        'my-header': Header
      }
    });
  </script>
</body>
</html>

局部組件的第二種使用方式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../statics/vue.min.js"></script>
</head>
<body>
  <div id="component-demo">
  </div>
  <script>
    // 定義一個局部組件,其實就是一個變數,它是一個object類型
    // 屬性與全局組件是一樣的
    let Header = {
      template: `
        <button @click="count++">{{ count }}</button>
      `,
      data() {
        return {
          count: 0
        }
      }
    };

    new Vue({
      el: "#component-demo",
      // 第二種使用方式,不會將div渲染進DOM,以template為根元素
      template: `<my-header></my-header>`,
      // 第二步,需要在根實例當中使用它
      components: {
        'my-header': Header
      }
    });
  </script>
</body>
</html>

對於 components 對象中的每個屬性來說,其屬性名就是自定義元素的名字,其屬性值就是這個組件的選項對象。

在局部組件中使用子組件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../statics/vue.min.js"></script>
  <style>
    body {
      margin: 0;
    }
    .box {
      width: 100%;
      height: 50px;
      background-color: #2aabd2;
    }

  </style>
</head>
<body>
  <div id="component-demo">
  </div>
  <script>
    // 定義一個局部組件,其實就是一個變數,它是一個object類型
    // 這個對象的屬性與全局組件是一樣的(除el屬性外)

    let Fcontent = {
      template: `
        <div>
          <span>這是頭條</span>

        </div>
      `
    };

    let Header = {
      template: `
        <div v-bind:class='{box: isBox}'>
          <button @click="count++">{{ count }}</button>
          <first-content></first-content>
        </div>
      `,
      data() {
        return {
          count: 0,
          isBox: true
        }
      },
      components: {
        'first-content': Fcontent
      }
    };

    new Vue({
      el: "#component-demo",
      // 第二種使用方式,不會將div渲染進DOM,以template為根元素
      template: `<my-header></my-header>`,
      // 第二步,需要在根實例當中使用它
      components: {
        'my-header': Header
      }
    });
  </script>
</body>
</html>


三、父子組件的通信

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../statics/vue.min.js"></script>
  <style>
    body {
      margin: 0;
    }
    .box {
      width: 100%;
      height: 50px;
      background-color: #2aabd2;
    }

  </style>
</head>
<body>
  <div id="component-demo">
  </div>
  <script>
    // 定義一個局部組件,其實就是一個變數,它是一個object類型
    // 屬性與全局組件是一樣的

    let Fcontent = {
      template: `
        <div>
          <span>這是頭條</span>
          {{ fdata }}
        </div>
      `,
      props: ['fdata']
    };

    let Header = {
      template: `
        <div v-bind:class='{box: isBox}'>
          <button @click="count++">{{ count }}</button>
          <first-content :fdata="fathData"></first-content>
        </div>
      `,
      data() {
        return {
          count: 0,
          isBox: true,
          fathData: "我是你爸爸~~~"
        }
      },
      components: {
        'first-content': Fcontent
      }
    };

    new Vue({
      el: "#component-demo",
      // 第二種使用方式,不會將div渲染進DOM,以template為根元素
      template: `<my-header></my-header>`,
      // 第二步,需要在根實例當中使用它
      components: {
        'my-header': Header
      }
    });
  </script>
</body>
</html>


四、子父之間的通信

父組件在mounted的時候,監聽一個自定義事件。

給子組件綁定一個click事件之後,通過內建的方法$emit在父組件上觸發一個事件,這個事件就是父組件監聽的自定義事件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../statics/vue.min.js"></script>
</head>
<body>

  <div id="app">


  </div>

  <script>
    let myFooter = {
      template: `
            <div>
              <h1>我是兒子</h1>
              <button v-on:click="changeFatherSize">點擊修改爸爸的字體</button>
            </div>
          `,
      methods: {
        changeFatherSize: function () {
          this.$emit('change-font', 1);
        }
      },
    };

    let myHeader = {
      template: `
            <div>
              <my-footer v-on:change-font="changeSize"></my-footer>
              <span :style="{ fontSize: fontSize + 'px'}">我是爸爸</span>
            </div>
        `,
      data(){
        return {
          fontSize: 26,
        }
      },
      methods: {
        changeSize: function (value) {
          console.log(value);
          this.fontSize += value;
        }
      },
      components: {
        'my-footer': myFooter
      }
    };

    let App = {
      template: `
        <div>
          <my-header></my-header>
        </div>
      `,
      components: {
        'my-header': myHeader,
      },
    };

    new Vue({
      el: "#app",
      template: `<App></App>`,
      components: {
        App
      }
    })
  </script>

</body>
</html>


五、平行組件之間的通信

平行組件之間可以通過一個中間Vue實例來進行通信。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../statics/vue.min.js"></script>
</head>
<body>
    <div id="app">
            <com-main></com-main>
    </div>

    <script>

        let bus = new Vue();

        let dogfa = {
            template: `
                <div>
                    <button @click="dogfaClick">點擊向djb道歉</button>
                </div>
            `,
            methods: {
                dogfaClick: function () {

                    bus.$emit("dogfa_apo", "原諒我吧,請你大保健~~~");
                }
            },
        };

        let djb = {
            template: `
                <div v-show="isShow">原諒你了~~~</div>
            `,
            mounted () {
                bus.$on("dogfa_apo", (dogfasay)=> {
                    if ( dogfasay ) {
                        console.log("原諒你了~~~");
                    }
                });
            },
            data () {
                return {
                    isShow: false
                };
            }
        };

        let App = {
            template: `
                <div id="app">
                    <dogfa></dogfa>
                    <djb></djb>
                </div>
            `,
            components: {
                dogfa,
                djb
            }
        };

        new Vue({
            el: "#app",
            template: '<App></App>',
            components: {
                App
            },
        })

    </script>

</body>
</html>


六、混入

混入可以提高代碼的重用性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../statics/vue.min.js"></script>
</head>
<body>

  <div id="app">


  </div>

  <script>
    let mixins = {
      methods: {
        show: function (name) {
          console.log(`${name} is here`);
        },
        hide: function (name) {
          console.log(`${name} is here`);
        }
      }
    };

    let myAlex = {
      template: `
        <div>
          <button @click="show('alex')">點我顯示alex</button>
          <button @click="hide('alex')">點我隱藏alex</button>
        </div>
      `,
      mixins: [mixins]
    };

    let myPeiQi = {
      template: `
        <div>
          <button @click="show('peiqi')">點我顯示peiqi</button>
          <button @click="hide('peiqi')">點我隱藏peiqi</button>
        </div>
      `,
      mixins: [mixins],
    };

    let App = {
      template: `
        <div>
          <my-alex></my-alex>
          <my-peiqi></my-peiqi>
        </div>
      `,
      components: {
        'my-alex': myAlex,
        'my-peiqi': myPeiQi,
      },
    };

    new Vue({
      el: "#app",
      template: `<App></App>`,
      components: {
        App
      }
    })
  </script>

</body>
</html>


七、插槽

有時候我們需要向組件傳遞一些數據,這時候可以使用插槽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .nav-link {
            width: 100px;
            height: 100px;
            background-color: #2aabd2;
            float: left;
            margin-left: 5px;
            text-align: center;
            line-height: 100px;
        }

    </style>
    <script src="../statics/vue.js"></script>
</head>
<body>
    <div id="app01">
        <com-content>登錄</com-content>
        <com-content>註冊</com-content>
        <com-content>最熱</com-content>
        <com-content>段子</com-content>
        <com-content>42區</com-content>
        <com-content>圖片</com-content>
    </div>

    <script>
        Vue.component('com-content', {
          template: `
            <div class="nav-link">
              <slot></slot>
            </div>
          `
        });

        new Vue({
            el: "#app01",
        })
    </script>

</body>
</html>


八、具名插槽

操作使用了組件的復用,如果我們在同一個組件內寫入不同的頁面呢?此時,我們需要多個插槽,並且給不同的內容命名。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .nav-link {
            width: 100px;
            height: 100px;
            background-color: #2aabd2;
            float: left;
            margin-left: 5px;
            text-align: center;
            line-height: 100px;
        }
    </style>
    <script src="../statics/vue.js"></script>
</head>
<body>
    <div id="app01">
        <base-layout>
            <template slot="header">
                <h1>這是標題欄</h1>
            </template>
            <template>
                <h2>這是內容</h2>
            </template>
            <template slot="footer">
                <h3>這是頁腳</h3>
            </template>
        </base-layout>
    </div>

    <script>
        let baseLayout = {
            template: `
                <div class="container">
                  <header>
                      <slot name="header"></slot>
                  </header>
                  <main><slot></slot></main>
                  <footer>
                      <slot name="footer"></slot>
                  </footer>
                </div>
            `
        };

        new Vue({
            el: "#app01",
            components: {
                "base-layout": baseLayout
            }

        })
    </script>

</body>
</html>

我們還是可以保留一個未命名插槽,這個插槽是預設插槽,也就是說它會作為所有未匹配到插槽的內容的統一齣口。


九、在組件上使用v-model

自定義事件也可以用於創建支持 v-model 的自定義輸入組件。記住:

`<input v-model="searchText">`

等價於:

<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>

當用在組件上時,v-model 則會這樣:

<custom-input
  v-bind:value="searchText"
  v-on:input="searchText = $event"
></custom-input>

為了讓它正常工作,這個組件內的 <input> 必須:

將其 value 特性綁定到一個名叫 value 的 prop 上
在其 input 事件被觸發時,將新的值通過自定義的 input 事件拋出

寫成代碼之後是這樣的:

Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
  `
})

現在 v-model 就應該可以在這個組件上完美地工作起來了:

<custom-input v-model="searchText"></custom-input>

如下是在組件中使用v-model示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../statics/vue.min.js"></script>
</head>
<body>
  <div id="app">
  </div>

  <script>
    let Model = {
      template: `
        <div>
            <input
              v-bind:value="value"
              v-on:input="$emit('input', $event.target.value)"
            />
            <h1>{{ value }}</h1>
      `,
      props: ['value']
    };

    let App = {
      template: `
        <div>
            <custom-input v-model="searchText"></custom-input>
      `,
      components: {
        'custom-input': Model,
      },
      data(){
        return {
          searchText: "",
        }
      }
    };

    new Vue({
      el: "#app",
      template: `<App></App>`,
      components: {
        App,
      }
    })
  </script>
</body>
</html>


十、使用組件的註意事項

註意事項一:單個根元素

當構建一個內容頁面的組件時,我們的組件可能包含多個HTML標簽。

<h1>Hello World</h1>
<h2>Hello Vue</h2>

然而如果你在模板中嘗試這樣寫,Vue 會顯示一個錯誤,並解釋道 every component must have a single root element (每個組件必須只有一個根元素)。你可以將模板的內容包裹在一個父元素內,來修複這個問題,例如:

<div>
  <h1>Hello World</h1>
  <h2>Hello Vue</h2>
</div>


註意事項二:解析特殊HTML元素

有些 HTML 元素,諸如 <ul><ol><table><select>,對於哪些元素可以出現在其內部是有嚴格限制的。而有些元素,諸如 <li><tr><option>,只能出現在其它某些特定的元素內部。

這會導致我們使用這些有約束條件的元素時遇到一些問題。例如:

<table>
  <blog-post-row></blog-post-row>
</table>

這個自定義組件 <blog-post-row> 會被作為無效的內容提升到外部,並導致最終渲染結果出錯。幸好這個特殊的 is 特性給了我們一個變通的辦法:

<table>
  <tr is="blog-post-row"></tr>
</table>

需要註意的是如果我們從以下來源使用模板的話,這條限制是不存在的:

字元串 (例如:template: '...')
單文件組件 (.vue)
<script type="text/x-template">





您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 將mysql從5.5.25升級到8.0.12過程中遇到幾個問題,記錄如下: 將資料庫安裝好後,導入原來的數據,啟動tomcat,報錯unable to load authentication caching_sha2_plugin,解決辦法如下: ALTER USER 'root'@'localho ...
  • 菜單激活鍵盤快捷鍵、文檔視窗和瀏覽器鍵盤快捷鍵、代碼編輯器鍵盤快捷鍵、T-SQL 調試器鍵盤快捷捷 ...
  • 前言 遇到Mysql死鎖問題,我們應該怎麼排查分析呢?之前線上出現一個insert on duplicate死鎖問題,本文將基於這個死鎖問題,分享排查分析過程,希望對大家有幫助。 死鎖案發還原 表結構: CREATE TABLE ( int(11) NOT NULL AUTO_INCREMENT, ...
  • 1、什麼是多渠道打包 在不同的應用市場可能有不同的統計需求,需要為每個應用市場發佈一個安裝包,這裡就引出了Android的多渠道打包。在安裝包中添加不同的標識,以此區分各個渠道,方便統計app在市場的各種。 2、幾種打包方式 友盟 UMeng Android Studio自帶 美團 Walle 3、 ...
  • Android環境配置 1. 前期準備 Android環境的Eclipse: 網站鏈接: SDK的CPU鏡像資源: 網站鏈接: 為啥要下載這個版本呢?因為我經歷的一晚上的研究,發現Eclipse自帶的AVD不能用(至少我的電腦是這樣) 然後下載對應的SDK: 2. 軟體解壓縮與環境準備 Eclips ...
  • # QzsWanAndroid - [基於 wanandroid.com 開發的 MVP + Retrofit2 + RxJava2 +okhttp3 開發的 Android APP](https://github.com/javaexception/QzsWanAndroid) ![](https ...
  • easyui中formatter的用法 當我們使用easyui需要對某一列進行格式化處理value數據時,可以使用formatter進行格式化 商品類型值為0時,前端將顯示“主體商品”。 商品類型值為1時,前端將顯示“附屬商品”。 value:欄位值 row:行記錄數據 index:行所在索引 js ...
  • 1.不管什麼語言,上來就應該是數據類型了。js也不例外。那麼基本的數據類型我們有,boolean, number, string, null, undefine, symbol, object, function. 2. 有了基本類型,那麼我們怎麼去判斷一個變數的類型尼? 3. 如何去判斷是否是一個 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...