資訊專欄INFORMATION COLUMN
摘要：組件上一篇的表單輸入綁定使用組件注冊組件首先我們要創建一個實例要注冊一個全局組件，你可以使用。使用傳遞數據組件實例的作用域是孤立的。這意味著不能也不應該在子組件的模板內直接引用父組件的數據。
組件
使用組件 注冊組件上一篇：Vue的表單輸入綁定：https://segmentfault.com/a/11...
首先我們要創建一個實例：
new Vue({
el:".exp",
// ......
})
要注冊一個全局組件，你可以使用 Vue.component(tagName, options)。例如：
Vue.component("my-component", {
// 選項
})
組件在注冊之后，便可以在父實例的模塊中以自定義元素 < my-component >< /my-component > 的形式使用。要確保在初始化根實例之前注冊了組件：
渲染結果：
這是一個組件
對于自定義標簽名，Vue.js 不強制要求遵循 W3C 規則 (小寫，并且包含一個短杠)，盡管遵循這個規則比較好。
我們知道，在創建的實例里面是有data數據的，其實在組件里也可以寫數據：
Vue.component("my-component"{
templent:"",
data:function(){
return{
msg:"hello"
}
}
})
注意！組件里的data必須是一個函數，并將屬性返回
局部注冊不必在全局注冊每個組件。通過使用組件實例選項注冊，可以使組件僅在另一個實例/組件的作用域中可用：
渲染結果和上一個例子是一樣的。
我們來看看全局注冊和局部注冊的區別：
局部注冊的組件，只能在 .exp1 內使用，拿給 .exp 是不可以的，當然我們把全局注冊的組件給 .exp1 ，是可以生效的。
DOM 模板解析說明當使用 DOM 作為模板時 (例如，將 el 選項掛載到一個已存在的元素上), 你會受到 HTML 的一些限制，因為 Vue 只有在瀏覽器解析和標準化 HTML 后才能獲取模板內容。尤其像這些元素 < ul >，< ol >，< table >，< select > 限制了能被它包裹的元素，而一些像 < option > 這樣的元素只能出現在某些其它元素內部。
比如：
如上，這樣的寫法在DOM里渲染時會反正錯誤：
...
為了解決，就需要使用 is 屬性
有時候我們可能要在組件里寫很多的標簽，如果統統像上面那樣寫的話，看起來很費勁，這時候就可以使用模板字符串：
< script type="text/x-template" >< /script >
這樣寫的話就比較直觀了。
Prop 使用 prop 傳遞數據組件實例的作用域是孤立的。這意味著不能 (也不應該) 在子組件的模板內直接引用父組件的數據。要讓子組件使用父組件的數據，我們需要通過子組件的 props 選項。
子組件要顯式地用 props 選項聲明它期待獲得的數據：
在上面的例子中，我們要在子組件 tk 里傳一個參數，就需要使用 prop 屬性.
這種方式是靜態綁定的方法，還有就是利用 v-bind 指令進行動態綁定：
駝峰式命名和短橫線隔開式命名
HTML 特性是不區分大小寫的。所以，當使用的不是字符串模板，camelCased (駝峰式) 命名的 prop 需要轉換為相對應的 kebab-case (短橫線隔開式) 命名：
ue.component("child", {
// camelCase in JavaScript
props: ["myMessage"],
template: "{{ myMessage }}"
})
自定義事件 使用 v-on 綁定自定義事件
每個 Vue 實例都實現了事件接口 (Events interface)，即：
$on(enentName) 監聽事件
$emit(eventName) 觸發事件
我們可以使用 $emit 來用子組件觸發父組件的事件：
當我們點擊第二個按鈕時，就會觸發父組件內的 alert 事件。
其實我們也可以傳遞參數，由父組件接收：
this.$emit("jieshou","abc")
非父子組件通訊
有時候兩個組件也需要通信 (非父子關系)。在簡單的場景下，可以使用一個空的 Vue 實例作為中央事件總線：
使用 Slot 分發內容
這部分官方文檔說的有點啰嗦，我這邊就合到一塊說吧。直接上個例子：
Slot內容分發
為了讓組件可以組合，我們需要一種方式來混合父組件的內容與子組件自己的模板。這個過程被稱為 內容分發 (或 “transclusion” 如果你熟悉 Angular)。Vue.js 實現了一個內容分發 API，參照了當前 Web 組件規范草案，使用特殊的 元素作為原始內容的插槽。
分發完成
< slot >被成為插口，在組件中，我們需要使用 slot 插口預留一個位置，以方便分發內容。如上，在放置正文內容的地方，我們直接插入一對 slot 標簽標記出正文內容的位置。對于頁面標題和頁腳等特殊的位置，我們就需要"具名Slot"，用一個特殊的屬性 name 來配置如何分發內容。多個 slot 可以有不同的名字。具名 slot 將匹配內容片段中有對應 slot 特性的元素。
To be continue......上一篇：Vue的表單輸入綁定：https://segmentfault.com/a/11...
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88346.html
摘要：組件基礎與通信一腳手架簡介與安裝之前安裝的是模塊，之后安裝的是模塊。如果是三級組件通信，該如何處理比如父組件與孫子組件通信。和，提供和注入實現祖先組件和后代組件之間通信。 Vue組件基礎與通信 一、vue cli腳手架 ① vue cli 簡介與安裝 vue cli 3.0之前安裝的是vue-cli模塊，vue cli 3.0之后安裝的是@vue/cli模塊。如果已經全局安裝了舊版本的...
摘要：事件總線事件總線首先創建了一個名為的空的實例然后全局定義了組件最后創建了實例。在父組件模板中，子組件標簽上使用指定一個名稱，并在父組件內通過來訪問指定名稱的子組件。 學習筆記：組件詳解 組件詳解 組件與復用 Vue組件需要注冊后才可以使用。注冊有全局注冊和局部注冊兩種方式。 全局注冊 Vue.component(my-component, {}); 要在父實例中使用這個組件，必須要...
摘要：一父組件通過的方式向子組件傳遞數據，而通過子組件可以向父組件通信。而且只讀，不可被修改，所有修改都會失效并警告。 之前寫了一篇關于vue面試總結的文章, 有不少網友提出組件之間通信方式還有很多, 這篇文章便是專門總結組件之間通信的 vue是數據驅動視圖更新的框架, 所以對于vue來說組件間的數據通信非常重要，那么組件之間如何進行數據通信的呢？首先我們需要知道在vue中組件之間存在什么樣...
摘要：官方推薦的風格指南個人筆記最近剛注意到官方多了一個風格指南的推薦。中始終用組件命名因為官方推薦風格命名，所以能用就用組件命名單詞應該是完整的單詞完整單詞帶易讀性的好處，和書寫麻煩的缺點。 Vue官方推薦的風格指南-個人筆記 最近剛注意到vue官方多了一個vue風格指南的推薦。 因為業務中一直用的vue，所以梳理學習一下，來增加自己代碼的規范性，效果不錯也可以安利到團隊。 文檔沒有對JS...
閱讀 2637·2023-04-26 02:17
閱讀 1610·2021-11-24 09:39
閱讀 1070·2021-11-18 13:13
閱讀 2598·2021-09-02 15:11
閱讀 2770·2019-08-30 15:48
閱讀 3406·2019-08-30 14:00
閱讀 2431·2019-08-29 13:43
閱讀 658·2019-08-29 13:07
