前端開發系列052-基礎篇之資料流和元件通訊(Vue)
title: 前端開發系列052-基礎篇之資料流和元件通訊(Vue)
tags:
categories: []
date: 2017-12-21 00:00:00
本文是早期學習Vue整理的一些階段性總結，內容主要關於Vue框架中元件間通訊和資料流。
一、元件中的資料
Vue元件中的資料主要有兩種，一種是元件內部提供的，一種是元件外部傳入的。
元件內部提供的資料，在元件註冊時候由選項物件中的data函式返回（返回的是一個物件字面量，所有的資料以鍵值對的方式組織）。
元件外部傳入的資料，在元件註冊的時候由選項物件中的props屬性來進行指定，props屬性對應的值通常為字串陣列。
所謂元件內部的資料，即元件本身自帶的，該元件在任何地方使用不論使用多少次都一定擁有的資料，如窗戶這個元件中一定要使用(鋁合金)和(高強度)玻璃。
所謂元件外部傳入的資料，即在元件具體使用的時候傳入的用於對元件本身的資料進行個性化處理和配置的資料,如1樓窗戶使用12塊玻璃，2樓的窗戶是落地窗只有1塊玻璃。
二、元件內部的資料
<body> <div id="demoID"> <my-component></my-component> <hr> <my-component></my-component> </div> <template id="my_div"> <div> <div>元件內部的資料1 message:{{message}}</div> <div>元件內部的資料2 className:{{className}}</div> <a :href="srcURL">我是a標籤，我的連結地址為:{{srcURL}}</a> </div> </template> <script> //例項化元件 Vue.component("my-component",{ template:"#my_div", data:function () { return { message:"也許你沒留意，也許你不相信！", className:"等風來001", srcURL:"http://www.wendingding.com" } } }); //建立Vue例項並掛載到頁面中指定的標籤 new Vue({ el:"#demoID" }) </script>
上面的程式碼中我們註冊了一個元件（my-component），元件內部擁有兩個資料，分別是message和className，在頁面中我們兩次使用到了該元件，每次使用該元件的時候渲染後的內容都是一樣的。需要注意的是，如果是要用元件內的資料來設定模板中標籤的屬性節點，那麼需要通過v-bind指令來程序繫結。
另外，元件內部的資料也可以通過計算屬性來進行處理，下面對之前的示例進行簡單的調整，模板中a標籤內容中的資料我們通過計算屬性的方式來進行獲取。
<body> <div id="demoID"> <my-component></my-component> </div> <template id="my_div"> <div> <div>元件內部的資料1 message:{{message}}</div> <div>元件內部的資料2 className:{{className}}</div> <a :href="src">我是a標籤，我的連結地址為:{{srcURL}}</a> </div> </template> <script> //例項化元件 Vue.component("my-component",{ template:"#my_div", data:function () { return { message:"也許你沒留意，也許你不相信！", className:"等風來001", src:"http://www.wendingding.com" } }, computed:{ //通過計算屬性的方式來得出a標籤中srcURL的值為wendingding.com srcURL:function () { return this.src.substr(11); } } }); //建立Vue例項並掛載到頁面中指定的標籤 new Vue({ el:"#demoID" }) </script> </body>
程式碼執行的結果為：
元件內部的資料1 message:也許你沒留意，也許你不相信！
元件內部的資料2 className:等風來001
我是a標籤，我的連結地址為:wendingding.com
三、元件外部傳入的資料
我們知道元件其實就是以一定的方式把多個標籤和資料組織在一起，以方便程式碼的複用和管理。這樣每次在實現某個特定（相似）功能(UI)的時候就不必總是從頭開始，而只需要以"自定義標籤"的方式來使用元件就可以了。
假設我們是一個第三方的汽車製造工廠，因為製造一臺比亞迪秦和比亞迪宋的生產線基本上是一樣的，這個生產線就好比是元件，相當於我們把這個汽車的生產線封裝成了元件，每次需要一輛汽車的時候只需要開啟對應的生產線生產就可以了。
在這裡要知道，因為不同型別的汽車其配置等資訊是不一樣的，所以需要個性化處理，這部分的資料需要在使用元件的時候具體的傳遞進去。元件在使用的時候其實也一樣，元件中除固定不變的內部資料外，有時候還需要外部傳入進行個性化配置。
<body>
<div id="demoID">
<my-component msg1="外部訊息1" msg2="外部訊息2"></my-component>
<hr>
<my-component msg1="{key:value}" msg2="[1,2,3]"></my-component>
</div>
<template id="my_div">
<div>
<div>元件內部的資料1 message:{{message}}</div>
<div>元件內部的資料2 className:{{className}}</div>
<a :href="src">我是a標籤，我的連結地址為:{{srcURL}}</a>
<hr>
<div>元件外部傳入的資料1 msg1:{{msg1}}</div>
<div>元件外部傳入的資料2 msg2:{{msg2}}</div>
<div>元件外部傳入的所有資料為 {{text}}</div>
<div>元件內部的資料 + 元件外部的資料 {{AllText}}</div>
</div>
</template>
<script>
//例項化元件
Vue.component("my-component",{
template:"#my_div",
data:function () {
return {
message:"也許你沒留意，也許你不相信！",
className:"等風來001",
src:"http://www.wendingding.com"
}
},
props:["msg1","msg2"],
computed:{
srcURL:function () {
return this.src.substr(11);
},
text:function () {
return "msg1 :" + this.msg1 + " msg2:" + this.msg2;
},
AllText:function () {
return "外部資料" + this.text + "內部資料" + "message：" + this.message + "className:" +this.className;
}
}
});
//建立Vue例項並掛載到頁面中指定的標籤
new Vue({
el:"#demoID"
})
</script>
</body>
程式碼說明 在上面的程式碼中msg1和msg2為外部傳入元件的資料，在傳遞資料的時候使用的形式是為自定義標籤（元件）設定屬性節點，在元件內部處理的時候key渲染的時候會被替換為對應的值。需要注意的是，設定傳入資料的時候，接收到的資料型別都是字串，而在元件中無論是內部的資料還是外部傳入的資料都能夠以相同的方式使用，在訪問的時候需要使用this字首。這裡貼出上面程式碼執行的結果：
元件內部的資料1 message:也許你沒留意，也許你不相信！
元件內部的資料2 className:等風來001
我是a標籤，我的連結地址為:wendingding.com
元件外部傳入的資料1 msg1:外部訊息1
元件外部傳入的資料2 msg2:外部訊息2
元件外部傳入的所有資料為 msg1 :外部訊息1 msg2:外部訊息2
元件內部的資料 + 元件外部的資料 外部資料msg1 :外部訊息1 msg2:外部訊息2內部資料message：也許你沒留意，也許你不相信！className:等風來001
----------------------------------------------------------------
元件內部的資料1 message:也許你沒留意，也許你不相信！
元件內部的資料2 className:等風來001
我是a標籤，我的連結地址為:wendingding.com
元件外部傳入的資料1 msg1:{key:value}
元件外部傳入的資料2 msg2:[1,2,3]
元件外部傳入的所有資料為 msg1 :{key:value} msg2:[1,2,3]
元件內部的資料 + 元件外部的資料 外部資料msg1 :{key:value} msg2:[1,2,3]內部資料message：也許你沒留意，也許你不相信！className:等風來001
元件外部傳入資料-屬性節點的命名規範問題
> 向元件傳入資料
>❒ 在元件內部的props屬性中註明"這些資料"是從元件的外部傳入的
>❒ 使用元件的時候通過設定`"自定義標籤"[元件]`的屬性節點來傳入資料 形式為：key="value"
>❒ 在元件內部通過key來訪問對應的值，得到的總是字串
特別注意 在傳入資料的時候需要注意因為HTML本身不區分大小寫的關係，所以如果props中註明的資料是駝峰標識的，那麼在設定屬性節點的時候應該把單詞拆分後使用-分隔。舉例現在我們在元件中需要接受外部傳入的資料名稱為"myMessage"，那麼應該做對應的調整。
//Vue元件例項化的部分程式碼...
props:["msg1","msg2","myMessage"]
//Vue元件中template中使用到指定資料的部分程式碼
<div>元件外部傳入的資料3 myMessage:{{myMessage}}</div>
//傳入資料的部分程式碼(把myMessage拆分為 my-message)
<my-component msg1="外部訊息1" msg2="外部訊息2" my-message="我的-訊息"></my-component>
特別說明 如果傳遞到元件中的資料的值並不是固定不變的，而需要動態繫結，那麼在使用元件的時候需要使用v-bind指令。
<body>
<div id="demoID">
<!--msg1的值是固定不變的，傳遞的是普通的字串-->
<!--msg2的值不確定，需要根據Vue例項物件（這裡為app）中data屬性物件中msg2Text鍵值對來確定，使用v-bind指令-->
<!--src的值也不確定，需要根據Vue例項物件（這裡為app）中data屬性物件中srcT鍵值對來確定，使用v-bind指令-->
<!--src的值因為需要作為插值語法和屬性的value值來進行設定，因此在a標籤中也需要使用v-bind指令來動態繫結-->
<my-component msg1="msg1:我是msg1" :msg2="msg2Text" :src="srcT"></my-component>
</div>
<template id="templateID">
<div>
<div>外部傳入資料 {{msg1}}</div>
<div>外部傳入資料 {{msg2}}</div>
<a :href="src">外部傳入資料 {{src}}</a>
</div>
</template>
<script>
//例項化元件
Vue.component("my-component",{
template:"#templateID",
//外部傳入元件的三個資料分別為:msg1 msg2 src
props:["msg1","msg2","src"]
});
//例項化Vue
var app = new Vue({
el:"#demoID",
data:{
msg2Text:"msg2:我是msg2 （動態繫結）",
srcT:"http://www.wendingding.com"
}
})
</script>
</body>
上述程式碼的執行情況如下
外部傳入資料 msg1:我是msg1
外部傳入資料 msg2:我是msg2 （動態繫結）
外部傳入資料 http://www.wendingding.com