Vue.js 組件 component

標籤：component   data props solt

什麼是組件？

組件（component）是Vue.js最強大的功能之一，核心目標是擴充HTML元素，封裝可重用的代碼。我們可以把組件代碼按照template、style、script的拆分方式，放置到對應的 .vue  檔案中。

Vue.js的組件可以理解為預先定義好行為的ViewModel類，一個組件可以預定義很多選項，但最核心的是以下幾個：

模板（template） --  模板聲明了資料和最終展現給使用者的DOM之間的映射關係

初始資料（data） --  一個組件的初始資料狀態。對於可複用的組件來說，通常是私人的狀態

接受的外部參數（props）  --  組件之間通過參數來進行資料的傳遞和共用。參數預設是單向綁定（由上而下），但也可以顯示聲明為雙向繫結

方法（methods）  --  對資料的改動操作一般都在組件的方法內進行，可以通過v-on指令將使用者輸入事件和組件方法進行綁定

生命週期鉤子函數（lifecycle hooks）  --  一個組件會觸發多個生命週期鉤子函數，比如created、attached、destroyed等。在這些鉤子函數中，我們可以封裝一些自訂的邏輯。和傳統的MVC相比，這可以理解為Controller的邏輯分散到了這些鉤子函數中

註冊

1、全域註冊     Vue.component(tagName, options)

Vue.component(‘my-component‘, {    // 選項})

如上所示，第一個參數是註冊組件的名稱（即在HTML中我們可以這樣使用組件：<didi-component></didi-component>）；第二個參數是組件的建構函式，它可以是Function，也可以是Object

Function  --  第二個參數可以是用Vue.extend()建立的一個組件構造器

var myComponent = Vue.extend({    //選項...})

Object  --  第二個參數傳入選項對象，Vue.js在背後自動調用Vue.extend()

//在一個步驟中擴充與註冊Vue.component(‘didi-component‘,{    template:‘<div>A custom component!</div>‘})

組件在註冊之後，便可以在父執行個體的模組中以自訂元素 <my-component></my-component> 的形式使用。要確保在初始化根執行個體 之前 註冊了組件：

<div id="example">    <my-component></my-component></div><script src="//cdn.bootcss.com/vue/2.0.7/vue.js"></script><script>    //註冊    Vue.component(‘my-component‘,{        template:‘<div>A custom component!</div>‘    })    //建立根執行個體    new Vue({        el:‘#example‘    })</script>

650) this.width=650;" src="http://s5.51cto.com/wyfs02/M02/8A/6F/wKioL1gwAY2B1tSpAABSZICSvVg744.png" title="QQ20161119153822.png" alt="wKioL1gwAY2B1tSpAABSZICSvVg744.png" />

2、局部註冊

不需要每個組件都全域註冊，可以讓組件只能用在其它組件內。我們可以用執行個體選項components註冊

<div id="example">    <my-component></my-component></div><!-- 我在使用Vue2.0版本時報錯--><script src="//cdn.bootcss.com/vue/1.0.26/vue.js"></script><script>    var Child = {        template:‘<div>I am child</div>‘    };    var Parent = {        template:‘<p>I am parent</p>‘+‘<child></child>‘,        components:{            //<my-component>只能用在父組件模板內            ‘child‘:Child        }    };    new Vue({        el:‘#example‘,        components:{            ‘my-component‘: Parent        }    }) </script>

650) this.width=650;" src="http://s5.51cto.com/wyfs02/M02/8A/6F/wKioL1gwCRPB80-1AABTsDPblVo663.png" title="QQ20161119160822.png" alt="wKioL1gwCRPB80-1AABTsDPblVo663.png" />

DOM模板解析說明

當使用 DOM 作為模版時（例如，將 el 選項掛載到一個已存在的元素上）, 你會受到 HTML 的一些限制，因為 Vue 只有在瀏覽器解析和標準化 HTML 後才能擷取模版內容。尤其像這些元素 <ul> ， <ol>， <table> ， <select> 限制了能被它包裹的元素， <option> 只能出現在其它元素內部。

在自訂群組件中使用這些受限制的元素時會導致一些問題，例如：

<table><my-row>...</my-row></table>

自訂群組件 <my-row> 被認為是無效的內容，因此在渲染的時候會導致錯誤。變通的方案是使用特殊的 is 屬性：

<table>    <tr is="my-row"></tr></table>

應當注意，如果您使用來自以下來源之一的字串模板，這些限制將不適用：

<script type="text/x-template">

JavaScript內聯模版字串

.vue 組件

因此，有必要的話請使用字串模版。

Vue.js 組件 component