1、組件的註冊
一、 全局組件註冊
1. 註冊基本語法Vue.componenthtml
Vue.component("my_header", { template: `<div><h1>{{title}}</h1></div>`, data() { return { title: "這是頭部" } } });
2. 第一個參數"my_header"：組件名稱
3. 第二個參數{}：配置信息
4. 配置信息裏面必需要有template，它的值是這個組件的html代碼
5. 還能夠有data、methods等參數，不一樣的是data不是對象了，而是函數，return返回的值，在template中能夠獲取並使用
函數詳寫是 data:function(){}; ES6中能夠直接簡寫 data(){return }，其餘函數同樣能夠簡寫省略 :function
6. Vue裏面有的參數，組件裏面多數也有，可是有一些參數是組件不能有的，好比el參數，全部組件都是Vue可複用的實例
7. 全局組件，全部app均可以使用sql
8. demo數組
<body> <div id="app"> <my_header></my_header> </div> <hr> <div id="app2"> <my_header></my_header> </div> <script> Vue.component("my_header", { template: `<div><h1>{{title}}</h1></div>`, data() { return { title: "這是頭部" } } }); const app = new Vue({ el: "#app", }); const app2 = new Vue({ el: "#app2" }) </script> </body>
二、局部組件註冊
1. 在某個app下注冊組件，其餘app不能使用
2. 基本語句：某個app內使用參數components: {組件名稱1： 配置信息1, 組件名稱2： 配置信息2}app
3. demoide
<body> <div id="app"> <my_com></my_com> <my_com></my_com> </div> <script> // 組件配置信息(對象) let my_com_config = { template: `<div><h1>這是局部組件</h1></div>` }; const app = new Vue({ el: "#app", components: { // 組件名稱： 配置信息 my_com: my_com_config } }); </script> </body>
三、子組件的註冊
1. 在某個組件內，也可使用components使用另外一個組件
2. 子組件須要這個組件的template代碼內使用函數
3. demopost
<body> <div id="app"> <my_com></my_com> </div> <script> let child_config = { template: `<div><h2>我是子組件</h2></div>` }; let my_com_config = { // 在組件的代碼裏面引用它的子組件 template: `<div> <h1>這是一個組件</h1> <child></child> </div>`, // 在某個組件內部也能夠定義的它的子組件 components: { child: child_config } }; const app = new Vue({ el: "#app", components: { my_com: my_com_config } }) </script> </body>
2、組件之間的通訊
一、父子組件之間的通訊
1. 在父組件的配置信息template中引用子組件，給子組件設置一個屬性，值是父組件data的值
2. 在子組件中配置一個props參數(數組)，裏面是那個屬性名
3. 而後在子組件的template代碼中就能夠直接使用這個屬性獲取到父組件傳過來的值學習
4. demothis
<body> <div id="app"> <my_com></my_com> </div> <script> let child_config = { template: `<div> <h2>我是子組件</h2> <p>父親對我說：{{father_say}}</p> </div>`, props: ["father_say"] }; let my_com_config = { template: `<div> <h1>這是一個組件</h1> <child :father_say="f_say"></child> </div>`, components: { child: child_config }, data(){ return { f_say: "好好學習" } } }; const app = new Vue({ el: "#app", components: { my_com: my_com_config } }) </script> </body>
二、子父組件之間的通訊
1. 子組件向父組件傳數據，須要提交一個事件
2. 在一個事件中經過this.$emit("事件名稱", "要傳的值")提交另外一個事件給父親
3. 在父組件中綁定子組件提交過來的事件，建立一個方法處理這個事件
4. data函數接收子組件提交過來的數據spa
5. demo
<body> <div id="app"> <my_com></my_com> </div> <script> let child_config = { // 設置一個click事件，經過click事件向父親提交一個事件son_say和數據 template: `<div> <h2>我是一個子組件</h2> <button @click="my_click">點擊向父親說話</button> </div>`, methods: { my_click() { // 向父親說話 // 子組件提交事件 this.$emit("son_say", "我會好好學習的") } } }; let my_com_config = { // 父組件接收子組件提交的事件son_say，並給這個事件設置一個處理方法my_son_say // 處理後的數據就可使用了{{say}} template: `<div> <h1>這是一個組件</h1> <child @son_say="my_son_say"></child> <p>兒子跟我說：{{say}}</p> </div> `, components:{ child: child_config }, data(){ return { say: "" } }, // 接收子組件傳來的數據data，並賦值給say,在代碼中展現出來 methods: { my_son_say: function (data) { this.say = data } } }; const app = new Vue({ el: "#app", components: { my_com: my_com_config } }) </script> </body>
三、非父子組件之間的通訊
1. 定義一個Vue實例做爲兩個組件之間通訊的橋樑
2. 其中一個組件向中間調度器提交事件：Event.$emit("事件名稱", data)
3. 另外一個組件要監聽中間調度器裏的事件：Event.$on("事件的名稱", function(data){
4. 注意this的問題：函數裏面的this是最近的調用者，外面的this纔是這個組件
5. demo
<body> <div id="app"> <ming></ming> <hong></hong> </div> <script> // 這個Vue實例不用傳數據，只是用於兩個組件之間通訊的橋樑 // 一個組件給這個實例提交事件，另外一個組件在這個實例裏監聽這個事件 let other = new Vue(); let ming_config = { template: `<div> <h1>我是明哥</h1> <button @click="my_click">給小紅打電話</button> </div>`, methods: { my_click: function() { // 給小紅打電話，說晚上等我，一塊兒嗨 // 兩個組件之間沒有關係(不是父子)，須要經過一個Vue對象進行通訊 // 給other對象提交事件 other.$emit("call", "晚上等我，一塊兒嗨") } } }; let hong_config = { template: `<div> <h1>我是紅姐</h1> <p>明哥勇猛地跟涐說：{{ming_say}}</p> </div>`, data(){ return { ming_say: "" } }, // 鉤子方法，組件加載完成後會執行這個方法 mounted(){ // 和$emit是一對的，$emit是提交事件，$on是監聽$emit提交的事件 // 第一個參數是監聽的事件名稱，第二個參數是監聽到後要執行的回調函數 let that = this; // 這個this是hong這個組件 other.$on("call", function(data){ // data是ming傳過來的數據，裏面的this是other的 that.ming_say = data; }) } }; const app = new Vue({ el: "#app", components: { ming: ming_config, hong: hong_config } }) </script> </body>
3、混合和插槽
一、混合
1. 當兩個組件複用共用的代碼塊時
2. 定義公共的代碼塊
3. 複用語法：mixins: [變量名]
4. demo
<body> <div id="app"> <com1></com1> <com2></com2> </div> <script> // 定義公用代碼 let base = { data() { return { is_show: false } }, methods: { show_text: function(){ this.is_show = true; }, hide_text(){ this.is_show = false; } } }; let com1 = { template: `<div> <button @click="show_text">點擊顯示文本</button> <button @click="hide_text">點擊隱藏文本</button> <div v-show="is_show">威猛的明哥出現了</div> </div>`, // 繼承公用代碼 mixins: [base], // 還能夠修改繼承過來的代碼 data(){ return { is_show: true } } }; let com2 = { template: `<div> <button v-on="{mouseenter: show_text, mouseleave: hide_text}">鼠標移入顯示文本，移出隱藏</button> <div v-show="is_show">威猛的明哥出現了</div> </div>`, // 繼承代碼 mixins: [base] }; const app = new Vue({ el: "#app", components: { com1: com1, com2: com2, } }) </script> </body>
二、 插槽
1. 把組件的template定義在html裏面
2. 在script中經過id找到這段template
3. template代碼內定義slot插槽，並使用name屬性區分不一樣的插槽信息
4. 使用組件的時候經過slot，能夠給組件添加上不一樣的內容
5. 生成的組件代碼中不會有template標籤
6. demo
<body> <div id="app"> <com> <h3 slot="title">Python</h3> <p slot="brief">從入門到精通</p> </com> <com> <h3 slot="title">Mysql</h3> <p slot="brief">從刪庫到跑路</p> </com> </div> <!--組件的template還能夠單獨寫出來--> <template id="my_com"> <div> <h1>這是一個組件</h1> <!--用slot定義插槽--> <slot name="title"></slot> <slot name="brief"></slot> <hr> </div> </template> <script> let com = { // 找到template模板 template: "#my_com" }; const app = new Vue({ el: "#app", components: { com: com } }) </script> </body>