Vue 2 | Part 7 組件

xcold 發布于2019-08-20 13:56 / 781人閱讀

摘要：因為這里會舉一連串的例子，就直接用來作為組件名稱了。這是一個組件名稱定義的時候有一點需要注意的，就是要使用中劃線分詞。在組件的方法里面返回數據就可以了。在的組件中間定義的內容，就會被插入到的位置中去。敬請期待下一期，組件通信。

界面寫多了，大家應該都會想到一個問題：JS的模塊寫好以后可以在多個地方重復使用，HTML有沒有辦法做到呢？Vue給了我們這個能力，使用組件，就可以輕松做到。

最簡單的組件

初始化Vue實例之前，使用Vue.component方法注冊一個簡單的template，在HTML中，就可以直接使用。因為這里會舉一連串的例子，就直接用one、two、three來作為組件名稱了。

Vue.component("one", {
    template: "這是一個item"
})

var app = new Vue({
    el: "#app"
})

組件名稱定義的時候有一點需要注意的，就是要使用中劃線分詞。比方說，我想新建一個叫list item的組件，組件的名稱就需要是list-item，在HTML中使用的時候也一樣：

Vue.component("list-item", {
    template: "這是一個item"
})

組件的內容可以從數據獲取嗎？

可以。在組件的data方法里面返回數據就可以了。跟Vue實例不一樣的是，組件的data對應一個function，在組件中想要用到的數據，需要從這個方法里面返回（返回的數據類型是對象）。

Vue.component("two", {
    template: "{{ listItem.name }}",
    data: function () {
        return {
            // 在html中引入gamesDB.js
            listItem: window.games[0]
        }
    }
})

組件的內容可以在HTML里面定義嗎？

可以。在組件中使用吧。在HTML的組件中間定義的內容，就會被插入到 tag的位置中去。除了直接定義文字之外，當然也可以寫HTML。


    item1
    item2
    item3

Vue.component("three", {
    template: ""
})

在沒有定義組件內容的時候，可以有默認的內容嗎？

可以。在tag中間設置的內容，就是默認的內容。


    
    這是自定義的內容

Vue.component("three", {
    template: "默認內容"
})

如果我想在不同的位置插入不同的內容呢？

使用具名吧。在template里面設置好每個slot的名稱，在HTML中通過slot屬性指定內容要插入到哪個具名中。詳情請看下面的代碼片段和注釋。


    
        
        
          Home
          Profile
          Messages
        

        
        this is my awesome website

Vue.component("five", {
    template:
        "" +
            "" +
                // 設置slot的名稱為header
                "" +
            "" +
            "" +
                // 設置slot的名稱為content
                "" +
            "" +
        ""
})

圖片中選中的這一行，因為在HTML中指定slot的時候使用了div tag所以文字被它包了起來，如果希望直接插入文字，可以使用template這個tag：

既然組件相當于自定義了一個tag，那可以自定義tag的屬性嗎？

可以的。使用component的props來設置吧。這里有一點千萬要記得，在props里面，是駝峰式分詞，但是，在HTML里面使用這個屬性的時候，需要用中劃線分詞，是中！劃！線！我最開始使用的時候，兩邊都習慣性地使用駝峰，結果死活沒有效果。最后才發現官方文檔有說明……

Vue.component("six", {
    props: ["userName"],
    template: "{{ userName }}"
})

從屬性傳入的數據，組件內可以進行處理嗎？

可以。我們用計算屬性做例子吧。把屬性設定的文字轉換為全大寫。

Vue.component("six", {
    props: ["userName"],
    // 最后template中使用的是計算屬性
    template: "{{ uppercaseName }}",
    computed: {
        uppercaseName: function() {
            return this.userName.trim().toUpperCase()
        }
    }
})

這些自定義的屬性也可以用v-bind指令嗎？

YES！直接用官方的一個雙向數據綁定的例子吧：

Vue.component("six", {
    props: ["userName"],
    template: "{{ uppercaseName }}",
    computed: {
        uppercaseName: function() {
            return this.userName.trim().toUpperCase()
        }
    }
})

var app = new Vue({
    el: "#app",
    data: {
        inputMsg: ""
    }
})

可以在組件里面直接使用另外一個組件嗎？

當然可以。我們直接上例子吧：

Vue.component("game-list", {
    template:
        "" +
            // 直接使用第三個組件進行循環
            "{{ game.name }}" +
        "",
    data: function () {
        return {
            games: window.games
        }
    }
})

這期的基本上把組件的基礎都過了一遍，視頻里面會附加套用boostrap的css做一個自己的組件的內容。敬請期待下一期，組件通信。

寫在最后

源碼地址：https://github.com/levblanc/v...

視頻攻略：小的不才，為求一贊，自制本期視頻攻略在此。

云服務器 GPU云服務器 Part-2 vue組件 vue組件開發 vue父子組件通訊

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81328.html

Vue 2 | 基礎API系列文章合集

摘要：在大家的鞭策和鼓勵下，這個基礎的系列終于完成了。關于更新的頻率，因為是我自己一個人在做，文案視頻都準備好了才發的話，最快也只能一周一更。最后這幾期可以密集地更新，完全是因為公司放假了。不過月份的更新速度真的不能保證，抱歉。在大家的鞭策和鼓勵下，這個基礎API的系列終于完成了。所幸是沒有真的更到一百期才完結（笑）。最初是因為覺得錄視頻好玩，才挖的這個坑。也想過中途放棄，關掉專欄，但由于...

instein 2019-08-20 14:00 評論0 收藏0
Vue.js應用性能優化：第一部分---介紹性能優化和懶加載

摘要：我的目標是使本系列成為關于應用程序性能的完整指南。代碼分割就是將應用程序分割成這些延遲加載的塊。總結延遲加載是提高應用程序性能并減少其大小的最佳方法之一。在本系列的下一部分中，我將向您展示如何使用和路由來分割應用程序代碼。當移動優先（mobile-first）的方式逐漸成為一種標準，而不確定的網絡環境因素應該始終是我們考慮的一點，因此保持讓應用程序快速加載變得越來越困難。在本系列文章...

ZweiZhao 2019-08-26 18:27 評論0 收藏0
Vue.js應用性能優化：第二部分---路由懶加載和 Vendor bundle 反模式

摘要：現在，我們將更深入地研究，并學習用于分割應用程序最實用的模式。本系列文章基于對性能優化過程的學習。路徑時才被下載。為了便于理解，文件名稱并不是由生成的真實名稱。接下來，我們將學習其他部分和單獨的組件也能夠從主文件分割出來并延遲加載。在前一篇文章中，我們學習了什么是代碼分割，它是如何與 Webpack 一起工作的，以及如何在Vue應用程序中使用延遲加載。現在，我們將更深入地研究，并學習...

0x584a 2019-08-26 13:45 評論0 收藏0
Vue.js應用性能優化：第三部分-延遲加載Vuex模塊

摘要：靜態模塊不能被取消注冊也不能延遲注冊，并且在初始化后不能更改靜態模塊的結構不是狀態。為此，我們將在路由對應的組件中加載模塊，而不是在中導入并注冊它。能代碼分割模塊是一個強大的工具。在前一部分，我們學習了足夠強大的模式，可以顯著提高應用程序的性能 - 按每個路由分割代碼。雖然按路由分割代碼非常有用，但是在用戶訪問我們的站點后，仍然有很多代碼是不需要的。在本系列的這一部分中，我們將重點關...

charles_paul 2019-08-26 13:50 評論0 收藏0
VUE - MVVM - part12 - props

摘要：看這篇之前，如果沒有看過之前的文章，移步拉到文章末尾查看之前的文章。而該組件實例的父實例卻并不固定，所以我們將這些在使用時才能確定的參數在組件實例化的時候傳入。系列文章地址優化優化總結看這篇之前，如果沒有看過之前的文章，移步拉到文章末尾查看之前的文章。前言在上一步，我們實現 extend 方法，用于擴展 Vue 類，而我們知道子組件需要通過 extend 方法來實現，我們從測試例...

bluesky 2019-08-22 17:07 評論0 收藏0