vue组件开发
vue組件開發(fā)
- 7.vue組件 ***
- 7.1 什么是組件
- 組件特點(diǎn)：***
- 7.2 組件的注冊(cè)及其使用
- 7.2.1 全局組件
- 7.2.2 局部組件
- 7.2.3 組件的使用 ***
- 7.3 組件間傳值**
- 7.3.1 父->子傳值props ***
- 7.3.2 子->父?jìng)髦?emit() ***
- 7.3.3 EventBus兄弟傳參 **
- 7.3.4 ref *
- 7.3.5 $root
- 7.3.6 parent
- 7.3.7 祖先組件傳遞后代組件
- 7. 3.8 $nextTick **
- 7.4 動(dòng)態(tài)組件
- keep-alive
- 7.5 組件插槽
- 7.5.1 匿名插槽
- 7.5.2 具名插槽
- 7.5.3 作用域插槽
- 7.7 插件
- 7.8 過渡效果和動(dòng)畫效果
- 使用render 實(shí)現(xiàn)虛擬dom
- 8. 使用 npm
- 9. 項(xiàng)目結(jié)構(gòu)
7.vue組件 ***
7.1 什么是組件
組件 （Component）是 Vue.js 最強(qiáng)大的功能之一，組件是一個(gè)自定義元素或稱為一個(gè)模塊，包括所需的模板（HTML）、邏輯（JavaScript）和樣式（CSS）。
組件化開發(fā)的特點(diǎn)：
-
標(biāo)準(zhǔn)
-
分治
-
重用
-
組合
組件也是有 全局（component） 與 局部（components） 之分。
組件的屬性可以寫為： template data methods watch computed filters directives(自定義指令)
組件特點(diǎn)：***
7.2 組件的注冊(cè)及其使用
在使用組件時(shí)需要注意以下幾點(diǎn)：
- 構(gòu)造 Vue 實(shí)例時(shí)傳入的各種選項(xiàng)大多數(shù)都可以在組件里使用，只有一個(gè)例外：data必須是函數(shù)，同時(shí)這個(gè)函數(shù)要求返回一個(gè)對(duì)象
組件中的data為什么是函數(shù)
1.使用函數(shù)，在每次復(fù)用組件時(shí)，就可以產(chǎn)生一個(gè)新的data，給每個(gè)組件實(shí)例創(chuàng)建一個(gè)新的空間，
2.若是使用data對(duì)象形式，所有復(fù)用組件共用一個(gè)data，不是很好
-
組件模板 template
- 必須是單個(gè)根元素
- 支持模板字符串形式
-
組件名稱命名方式
- 短橫線方式（推薦）
- my-component
- 大駝峰方式（只能在其他組件模板字符串中使用，不能在HTML模板中直接使用）
- MyComponent
- 短橫線方式（推薦）
大駝峰式組件名不能在HTML模板中直接使用，如果需要在HTML模板中使用，需要將其進(jìn)行特定規(guī)則轉(zhuǎn)化：
-
首字母從大寫轉(zhuǎn)為小寫
-
后續(xù)每遇到大寫字母都要轉(zhuǎn)化成小寫并且在轉(zhuǎn)化后的小寫字母前加 -
例如， WoDeZuJian 這個(gè)大駝峰組件名在HTML中使用的時(shí)候需要寫成 wo-de-zu-jian
7.2.1 全局組件
全局組件：意味著可以在多個(gè)Vue實(shí)例下使用
全局組件注冊(cè)形式如下：
上述示例中， component() 的第一個(gè)參數(shù)是 組件名 （實(shí)則可以看作是HTML標(biāo)簽名稱），第二個(gè)參數(shù)是一個(gè)對(duì)象形式的選項(xiàng)，里面存放組件的聲明信息。全局組件注冊(cè)后，任何Vue實(shí)例都可以使用。
例如，有以下代碼：
// 聲明一個(gè)全局的HelloWorld組件 Vue.component('HelloWorld', { data: function(){ return { msg: 'HelloWorld' } },template: '<div>{{msg}}</div>' });實(shí)例：
<body>組件的最大的優(yōu)勢(shì)：可以復(fù)用<div id="app"><!--組件在引用時(shí)需要寫雙標(biāo)記 ，單標(biāo)簽不管引用多少次只執(zhí)行一次--><btn-counter></btn-counter><btn-counter></btn-counter></div><script src="../js/vue.js"></script><script type="text/javascript">// 創(chuàng)建新的全局組件 // 全局注冊(cè)的組件可以用在其被注冊(cè)之后的任何 (通過 new Vue) 新創(chuàng)建的Vue根實(shí)例，也包括其組件樹中的所有子組件的模板中。//注冊(cè)組件（傳遞兩個(gè)參數(shù)，1、標(biāo)簽名 2、組件結(jié)構(gòu)器）Vue.component("btn-counter", {data: function () { //組件中的數(shù)據(jù),組件的data必須是一個(gè)函數(shù)return {count: 0}},//組件的模板template: `<button @click="count++">點(diǎn)擊了{(lán){count}}次</button>`})var vm = new Vue({el: "#app",data: {msg: "hello"}})//注意當(dāng)點(diǎn)擊按鈕時(shí)，每個(gè)組件都會(huì)各自獨(dú)立維護(hù)它的 count。//因?yàn)槟忝坑靡淮谓M件，就會(huì)有一個(gè)它的新實(shí)例被創(chuàng)建。</script> </body>7.2.2 局部組件
局部組件定義后只能在當(dāng)前注冊(cè)它的Vue實(shí)例中使用，其是通過某個(gè) Vue 實(shí)例/組件的實(shí)例選項(xiàng)components 注冊(cè)。
例如，有以下代碼：
var Child = { template: '<div>A custom component!</div>' } new Vue({ components: { // <my-component> 將只在父組件模板中可用 'my-component': Child } }) <body><div id="app"><component-demo></component-demo></div> </body> <script src="../js/vue.js"></script> <script>new Vue({el: '#app',components: {'component-demo': {template: '<h1>局部注冊(cè)組件{{ num }}</h1>',data () {return {num: 500}},computed: {},watch: {},mounted () {}}}}) </script>7.2.3 組件的使用 ***
在HTML模板中，組件以一個(gè)自定義標(biāo)簽的形式存在，起到占位符的功能。通過Vue.js的聲明式渲染后，占位符將會(huì)被替換為實(shí)際的內(nèi)容，下面是一個(gè)最簡(jiǎn)單的模塊示例：
<div id="app"> <my-component></my-component> </div>電話號(hào)碼簿組件實(shí)例，截圖：
例如：
<div id="app"><!--3.將組件渲染到頁面上-->注意，如果組件定義使用的是駝峰式寫法，直接在 DOM (即非字符串的模板) 中使用時(shí)只有 kebab-case 是有效的。<my-header></my-header><my-content :phone="phoneList"></my-content><my-footer></my-footer></div><script type="text/javascript">//注意：在傳參時(shí)盡量不要寫大寫，如果寫了大寫，//那么在js中使用 駝峰式寫法，在 html中必須更改為短橫//1.定義組件//頭var myHeader = {template: `<h2 class="myHeader">我的電話號(hào)碼簿</h2>`}//列表孫子，屬于myContent的子節(jié)點(diǎn)var myItem = {props: ['i'],template: `<li ><span>{{i.id}}</span> <span>{{i.name}}</span><span>{{i.phone}}</span><span><img src="../img/phone.jpg"/></span></li>`}//內(nèi)容var myContent = {props: ['phone'],created: function () {console.log(this.phone);},template: `<div class="myContent"><ul><my-item v-for="(item,index) in phone" :i="item"></my-item></ul></div>`,//在循環(huán)渲染時(shí)，需要傳一條記錄到子組件，也就是傳item，這樣子更方便components: {myItem}}//尾部var myFooter = {template: `<div class="myFooter">版權(quán)：? 歸web21班所有</div>`}/**************************************************/var vm = new Vue({el: "#app",data: {phoneList: [//電話號(hào)碼數(shù)據(jù){ "id": 1, "name": "斯琴高娃", "phone": "13412340987" },{ "id": 2, "name": "高曉松", "phone": "13512340987" },{ "id": 3, "name": "迪麗熱巴", "phone": "13612341234" },{ "id": 4, "name": "韓紅", "phone": "13312340987" },{ "id": 5, "name": "梁朝偉", "phone": "15812340987" },]},//2.引入組件components: {myHeader,myContent,myFooter}})</script>7.3 組件間傳值**
如前面介紹組件時(shí)所說，組件有 分治 的特點(diǎn)，每個(gè)組件之間具有一定的獨(dú)立性，但是在實(shí)際工作中使用組件的時(shí)候有互相之間傳遞數(shù)據(jù)的需求，此時(shí)就得考慮如何進(jìn)行 組件間傳值 的問題了。
7.3.1 父->子傳值props ***
簡(jiǎn)單父?jìng)髯?#xff1a;
<div id="app"><!--組件的調(diào)用，傳的參數(shù)的名稱 ，和子組件中 props所需要接收的名字要一致傳參，如果傳遞的是 常量不需要冒號(hào) ；如果 是 變量的話就需要冒號(hào)--><ball value="足球" :test="num1"></ball><ball value="籃球" :test="num2"></ball><ball value="乒乓球" :test="num3"></ball></div><script type="text/javascript" src="../js/vue.js"></script><script type="text/javascript">//這個(gè)代碼會(huì)報(bào)錯(cuò)//因?yàn)榻M件只允許有一個(gè)根節(jié)點(diǎn)var ball = {//父組件傳參給子組件時(shí)，使用 props接收props: ['value', 'test'],//接收的父組件的傳參template: `<div>我喜歡:{{value}}</div><div>我進(jìn)了 {{test}}個(gè)球</div>`};var vm = new Vue({el: "#app",data: {num1: 10,num2: 20,num3: 50},components: {ball}})</script>-
父組件以屬性的形式綁定值到子組件身上
-
子組件通過使用屬性props接收
-
props是單向綁定的（只讀屬性）：當(dāng)父組件的屬性變化時(shí)，將傳導(dǎo)給子組件，但是反過來不會(huì)
-
props屬性支持兩種常見的寫法形式
-
數(shù)組
-
優(yōu)點(diǎn)：書寫簡(jiǎn)單
-
缺點(diǎn)：不能設(shè)置默認(rèn)值、數(shù)據(jù)類型
-
-
對(duì)象
- 優(yōu)點(diǎn)：可以設(shè)置數(shù)據(jù)默認(rèn)值與數(shù)據(jù)類型
-
-
-
缺點(diǎn)：寫法復(fù)雜
單向數(shù)據(jù)流實(shí)例：
<div id="app"><child :msg="message"></child></div><script type="text/javascript">//組件var child = {props: ["msg"],//接收從父組件傳過來的值data: function () {return {basemsg: this.msg //將從父組件接收的值賦值給 這個(gè)組件的變量}},template: `<div>我是子組件<br/>從父組件傳過來的數(shù)據(jù)是：{{basemsg}}<button @click ="change">修改msg的值</button></div>`,methods: {change: function () {console.log('子組件中的函數(shù)執(zhí)行了');//this.msg = " new value";//上一句會(huì)報(bào)錯(cuò)，原因是，vue的組件是單項(xiàng)數(shù)據(jù)流，//只能從父組件傳參數(shù)給子組件，父組件的值發(fā)生變化會(huì)影響子組件//不應(yīng)該在一個(gè)子組件內(nèi)部改變 propthis.basemsg = "newvalue";//修改了子組件自己的data數(shù)據(jù)}}}/****************************************/var vm = new Vue({el: "#app",data: {message: "hello"},components: {child}})</script>props數(shù)組、對(duì)象的寫法：
<div id="app"><prop-com :propb="n1" :propc="n2" :propd="n1" :prope="n4" :propf="n5"></prop-com><prop-com :propb="n2" :propc="n2" :propf="n5"></prop-com></div><script type="text/javascript">//傳的參數(shù)必須是 props里允許的數(shù)據(jù)類型var propCom = {//props:["propa"],/*props:{'title':String,'likes': Number,'ispublished': Boolean,'commentids': Array,'author': Object,},*/props: {propb: [String, Number],// 傳的參數(shù)可以是多種數(shù)據(jù)類型propc: {type: String,required: true //必填項(xiàng)},propd: {type: Number,default: 100//當(dāng)沒傳參數(shù)時(shí)，不會(huì)報(bào)錯(cuò)，而會(huì)顯示默認(rèn)值},prope: {type: Object,// 對(duì)象或數(shù)組默認(rèn)值必須從一個(gè)工廠函數(shù)獲取default: function () {return { message: 'hello' }}},// 自定義驗(yàn)證函數(shù)propf: {validator: function (value) {// 這個(gè)值必須匹配下列字符串中的一個(gè)return ['success', 'warning', 'danger'].indexOf(value) !== -1}}},template: `<div>我是一個(gè)新的組件<ul><li>{{propb}}</li><li>{{propc}}</li><li>{{propd}}</li><li>{{prope}}</li><li>{{propf}}</li></ul></div>`}/*************************************************/var vm = new Vue({el: "#app",data: {n1: 123,n2: 'hello',n3: true,n4: { "aaaa": "8888" },n5: 'success'},components: {propCom}})</script>單向數(shù)據(jù)流的處理：
<div id="app"><child :msg="message"></child></div><script type="text/javascript">//組件var child = {props: ["msg"],//接收從父組件傳過來的值data: function () {return {basemsg: this.msg //將從父組件接收的值賦值給 這個(gè)組件的變量}},template: `<div>我是子組件<br/>從父組件傳過來的數(shù)據(jù)是：{{basemsg}}<button @click ="change">修改msg的值</button></div>`,methods: {change: function () {console.log('子組件中的函數(shù)執(zhí)行了');//this.msg = " new value";//上一句會(huì)報(bào)錯(cuò)，原因是，vue的組件是單項(xiàng)數(shù)據(jù)流，//只能從父組件傳參數(shù)給子組件，父組件的值發(fā)生變化會(huì)影響子組件//不應(yīng)該在一個(gè)子組件內(nèi)部改變 propthis.basemsg = "newvalue";//修改了子組件自己的data數(shù)據(jù)}}}/****************************************/var vm = new Vue({el: "#app",data: {message: "hello"},components: {child}})</script>使用computed：
<div id="app"><child :msg = "message"></child></div><script type="text/javascript">//組件的單項(xiàng)數(shù)據(jù)流的特點(diǎn)：父組件的值發(fā)生變化會(huì)影響子組件，//而子組件的值發(fā)生變化，不會(huì)影響到父組件，只影響自己的輸出var child = {props:["msg"],//接收從父組件傳過來的值computed:{changemsg:function(){return this.msg.toUpperCase();}},template:`<div>我是子組件<br/>從父組件傳過來的數(shù)據(jù)是：{{changemsg}}</div>`, }/****************************************/var vm = new Vue({el:"#app",data:{message:"hello"},components:{child}})</script>7.3.2 子->父?jìng)髦?emit() ***
-
子組件模版內(nèi)容中用 $emit() 定義 自定義事件 ， $emit() 方法有2個(gè)參數(shù)
-
第一個(gè)參數(shù)為自定義的事件名稱
-
第二個(gè)參數(shù)為需要傳遞的數(shù)據(jù)（可選）
-
-
父組件模板內(nèi)容中的子組件占位標(biāo)簽上用v-on（或@）綁定子組件定義的自定義事件名，監(jiān)聽子組件的事件，實(shí)現(xiàn)通信
子傳父實(shí)例：
<div id="app"><mybtn @myclick="clickFun"></mybtn><hr /><div class="parent">父組件的值message：{{message}}</div></div><script src="../js/vue.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">/*1.在子組件的函數(shù)里去主動(dòng)觸發(fā)一個(gè)事件，事件名稱自己定義 ，并且在主動(dòng)觸發(fā)時(shí)會(huì)傳遞一個(gè)參數(shù) this.$emit("myclick","newvalue");2.在html中 調(diào)用 該組件時(shí)，事件名稱需與主動(dòng)觸發(fā)的事件名稱一致<mybtn @myclick = "clickFun"></mybtn>3.父組件的clickFun 事件，可以接收從子組件傳過來的值*///1.定義組件var mybtn = {template: `<div class="child" @click="clickbtn">子組件點(diǎn)擊-改變父組件的值</div>`,methods: {clickbtn: function () {console.log("子組件的函數(shù)被觸發(fā)了");this.$emit("myclick", "newvalue");//$emit 主動(dòng)觸發(fā)}}}/******************************************************/var vm = new Vue({el: "#app",data: { message: '我是父組件的數(shù)據(jù)' },components: { mybtn },methods: {clickFun: function (value) {console.log("父組件的函數(shù)觸發(fā)了");console.log("從子組件傳過來的值", value);this.message = value;}}})</script>自定義組件上使用 v-model：
<div id="app"><input type="text" v-model="message" />{{message}}<child v-model="msg"></child><hr>父組件：{{msg}}</div><script type="text/javascript" src="../js/vue.js"></script><script type="text/javascript">//直接在組件上寫 v-model是不起作用var child = {props: ['value'],template: `<div>我是子組件<input type="text" v-bind:value="value" @input="$emit('input',$event.target.value)"/></div>`}/*************************************/var vm = new Vue({el: "#app",data: {msg: "hi vue",message: 'hello'},components: {child}})</script>習(xí)題
要求：1.點(diǎn)擊父組件按鈕顯示子組件，點(diǎn)擊子組件隱藏本身，
? 2.使用.native 給子組件綁定原生事件
<div id="app"><div><input type="button" value="我是父組件按鈕，點(diǎn)擊顯示子組件" @click="changeType" /></div><hr /><!-- .native 可以觸發(fā)自定義組件上的原生事件 --><child v-show="isshow" @childshow="isShowFun" @mouseover.native="show"></child></div><script type="text/javascript" src="../js/vue.js"></script><script type="text/javascript">//需求：點(diǎn)擊父組件的按鈕，顯示子組件；點(diǎn)擊子組件的印象按鈕，將子組件隱藏var child = {template: `<div class="child">我是子組件，我在藍(lán)色的海洋里<button @click="childFun">點(diǎn)擊按鈕，隱藏子組件</button></div>`,methods: {childFun: function () {//需要將 值傳遞給父節(jié)點(diǎn)this.$emit("childshow", false);}}}/****************************************************/var vm = new Vue({el: '#app',data: {isshow: false},components: {child},methods: {changeType: function () {this.isshow = true;},isShowFun: function (type) {console.log("父節(jié)點(diǎn)接收的數(shù)據(jù)：", type);this.isshow = type;},show: function () {console.log("自定義組件上的原生事件觸發(fā)了");}}})</script>.sync
<div id="app"><div><input type="button" value="我是父組件按鈕，點(diǎn)擊顯示子組件" @click="changeType" /></div><hr /><!-- <child v-show="isshow" @childshow="isShowFun"></child> --><!-- <child v-show="isshow" @up-is-show="isShowFun"></child> --><!-- <child v-show="isshow" @update:is-show="isShowFun"></child> --><!-- <child v-show="isshow" @update:is-show="function(type){isshow=type;}"></child> --><!-- <child v-show="isshow" @update:is-show="type=>isshow=type"></child> --><child v-show="isshow" :is-show.sync="isshow"></child><!--.sync 就是 @update:is-show="type=>isshow=type" 的語法糖--></div><script type="text/javascript">//需求：點(diǎn)擊父組件的按鈕，顯示子組件；點(diǎn)擊子組件的印象按鈕，將子組件隱藏var child = {template: `<div class="child">我是子組件，我在藍(lán)色的海洋里<button @click="childFun">點(diǎn)擊按鈕，隱藏子組件</button></div>`,methods: {childFun: function () {//需要將 值傳遞給父節(jié)點(diǎn)// this.$emit("up-is-show",false);this.$emit("update:is-show", false);}}}/****************************************************/var vm = new Vue({el: '#app',data: {isshow: false},components: {child},methods: {changeType: function () {this.isshow = true;},// isShowFun:function(type){// console.log("父節(jié)點(diǎn)接收的數(shù)據(jù)：",type);// this.isshow = type;// }}})</script>7.3.3 EventBus兄弟傳參 **
EventBus又被稱之為中央事件總線
在Vue中通過單獨(dú)的 事件中心 來管理非 父子關(guān)系 組件（兄弟）間的通信：
公眾號(hào)千千萬，都得先關(guān)注公眾號(hào),一旦發(fā)送消息，就可以收到消息 - 專注交流一百年
核心步驟
- 建立事件中心
- 傳遞數(shù)據(jù)
- 接收數(shù)據(jù)
- 銷毀事件中心
先建立事件中心 const bus = new Vue()
在需要接受數(shù)據(jù)的地方先監(jiān)聽自定義事件以及接受數(shù)據(jù)的回調(diào)函數(shù)bus.$on('my-event', (data) => {})
在需要傳遞數(shù)據(jù)的地方提交 自定義事件以及參數(shù) bus.$emit('my-event', params)
<body><div id="app"><mycontent></mycontent><myfooter></myfooter></div> </body> <template id="content"><div>{{ content }}</div> </template> <template id="footer"><ul><li @click="goPage('home')">首頁</li><li @click="goPage('kind')">分類</li><li @click="goPage('cart')">購物車</li><li @click="goPage('user')">我的</li></ul> </template><script src="../js/vue.js"></script> <script>// 微信公眾號(hào)服務(wù)器 - 中央事件總線const bus = new Vue()const Content = {template: '#content',data () {return {content: ''}},mounted () {// 關(guān)注公眾號(hào)bus.$on('my-event', (data) => { // home / kind/ cart / userthis.content = data})}}const Footer = { template: '#footer',methods: {goPage (type) { // home / kind/ cart / user// 發(fā)送消息bus.$emit('my-event', type)}},}new Vue({el: '#app',components: {mycontent: Content,myfooter: Footer}}) </script>7.3.4 ref *
ref 屬性被用來給元素或子組件注冊(cè)引用信息，引用信息將會(huì)注冊(cè)在父組件的 $refs 對(duì)象上。
如果在普通的 DOM 元素上使用 ref 屬性，則引用指向的就是 DOM 元素；
如果 ref 屬性用在子組件上，引用就指向子組件實(shí)例。
-
ref 放在標(biāo)簽上，拿到的是原生節(jié)點(diǎn)。
-
ref 放在組件上 拿到的是組件實(shí)例
-
原理：在父組件中通過 ref 屬性（會(huì)被注冊(cè)到父組件的 $refs 對(duì)象上）拿到組件/DOM對(duì)象，從而得到組件/DOM中的所有的信息，也包括值
注意：
ref 屬性這種獲取子元素/組件的方式雖然寫法簡(jiǎn)單，容易上手，但是其由于權(quán)限過于開放，不推薦使用，有安全問題。（不僅可以獲取值，還可以獲取其他所有的元素/組件的數(shù)據(jù)，甚至可以修改這些數(shù)據(jù)。）
7.3.5 $root
可以用來從一個(gè)子組件訪問父組件的實(shí)例，
在絕大多數(shù)情況下，觸達(dá)父級(jí)組件會(huì)使得你的應(yīng)用更難調(diào)試和理解，尤其是當(dāng)你變更了父級(jí)組件的數(shù)據(jù)的時(shí)候。當(dāng)我們稍后回看那個(gè)組件的時(shí)候，很難找出那個(gè)變更是從哪里發(fā)起的。
<body><div id="app"><com></com></div> </body> <template id="com"><div><h1>$root訪問根實(shí)例</h1><button @click="test">獲取跟節(jié)點(diǎn)信息</button></div> </template> <script src="../js/vue.js"></script> <script>var com = {template: '#com',methods: {test: function () {console.log(this.$root.foo);this.$root.baz();}}}var app = new Vue({el: '#app',data: {foo: 1},computed: {bar: function () { /* ... */ }},methods: {baz: function () {console.log('根組件方法');}},components: {com}}) </script>7.3.6 parent
可以通過$parent直接獲取到父組件的實(shí)例
<body><div id="app"><com></com></div> </body> <template id="com"><div><h1>parent的使用</h1>{{ $parent.msg }}</div> </template> <script src="../js/vue.js"></script> <script>const Com = {template: '#com',mounted () {console.log(this.$parent)}}new Vue({el: '#app',components: {com: Com},data () {return {msg: 'hello msg'}},methods: {fn () {console.log('dsajhkdggdshjg')}}}) </script>如果需要在組件的結(jié)構(gòu)中訪問父組件的屬性和方法，不需要添加this,但是也可以添加
7.3.7 祖先組件傳遞后代組件
通過 provide + inject 完成傳值 跨級(jí)傳參
<body><div id="app"><com></com></div> </body> <template id="com"><div><h1>provide + inject的使用</h1>{{ aaa }}</div> </template> <script src="../js/vue.js"></script> <script>const Com = {template: '#com',inject: ['aaa']}new Vue({el: '#app',components: {com: Com},data: {msg: 'hello msg'},// provide: {// aaa: '啦啦啦' // 不能直接訪問 this.msg// }provide () { // 可以訪問this.msgconsole.log(this)return {aaa: this.msg}}}) </script>provide 和 inject 主要在開發(fā)高階插件/組件庫時(shí)使用。并不推薦用于普通應(yīng)用程序代碼中。
傳參方式總結(jié)，以下幾種方式都可以用來組件間傳參：
- props 父?jìng)髯?***
- $refs ***
- $emit 子傳父 ***
- eventBus 兄弟傳參 ***
- provide 和 inject 跨級(jí)傳參
- $root $parent $children 父子
- $attrs與 $listeners 父子 跨級(jí) 傳參
- vuex(這個(gè)略) *****
- localStorage / sessionStorage 使用緩存?zhèn)鲄?/li>
- v-model 可以父子通信的 v-bind v-on
- 作用域插槽 v-slot 子組件的數(shù)據(jù)傳遞給父組件使用
7. 3.8 $nextTick **
,可以將參數(shù)中的 回調(diào)函數(shù)里面的代碼，推后到 dom都加載完之后執(zhí)行，
使用nextTick可以獲取到最新渲染到頁面的節(jié)點(diǎn)信息
7.4 動(dòng)態(tài)組件
通過分支條件判斷實(shí)現(xiàn)選項(xiàng)卡切換
<body><div id="app"><home v-if="type==='home'"></home><kind v-else-if="type==='kind'"></kind><cart v-else-if="type==='cart'"></cart><user v-else></user><ul><li @click="goPage('home')">首頁</li><li @click="goPage('kind')">分類</li><li @click="goPage('cart')">購物車</li><li @click="goPage('user')">我的</li></ul></div> </body> <script src="../js/vue.js"></script> <script>const Home = { template: '<div>首頁</div>' }const Kind = { template: '<div>分類</div>' }const Cart = { template: '<div>購物車</div>' }const User = { template: '<div>我的</div>' }new Vue({el: '#app',data: {type: 'home'},components: {home: Home,kind: Kind,cart: Cart,user: User,},methods: {goPage (type) {this.type = type}}}) </script>通過使用保留的 元素，動(dòng)態(tài)地綁定到它的 is 特性，我們讓多個(gè)組件可以使用同一個(gè)掛載點(diǎn)，并動(dòng)態(tài)切換。
<body><div id="app"><component :is="type"></component><!-- type 對(duì)應(yīng)的是 組件的名稱 --><ul><li @click="type='home'">首頁</li><li @click="type='kind'">分類</li><li @click="type='cart'">購物車</li><li @click="type='user'">我的</li></ul></div> </body> <script src="../js/vue.js"></script> <script>const Home = { template: '<div>首頁</div>' }const Kind = { template: '<div>分類</div>' }const Cart = { template: '<div>購物車</div>' }const User = { template: '<div>我的</div>' }new Vue({el: '#app',data: {type: 'home'},components: {home: Home,kind: Kind,cart: Cart,user: User,}}) </script>思考：如果每個(gè)組件中都有一個(gè)輸入框，點(diǎn)擊切換時(shí)輸入不同的內(nèi)容，然后再切換，查看效果
keep-alive
keep-alive的作用：
keep-alive 可以將已經(jīng)切換出去的非活躍組件保留在內(nèi)存中。如果把切換出去的組件保留在內(nèi)存中，可以保留它的狀態(tài)，避免重新渲染。
<body><div id="app"><!-- keep-alive 可以將已經(jīng)切換出去的非活躍組件保留在內(nèi)存中。如果把切換出去的組件保留在內(nèi)存中，可以保留它的狀態(tài)，避免重新渲染。保留組件的狀態(tài)，避免組件的重新渲染--><keep-alive><component :is="type"></component></keep-alive><!-- type 對(duì)應(yīng)的是 組件的名稱 --><ul><li @click="type='home'">首頁</li><li @click="type='kind'">分類</li><li @click="type='cart'">購物車</li><li @click="type='user'">我的</li></ul></div> </body> <script src="../js/vue.js"></script> <script>const Home = { template: '<div>首頁<input type="text" placeholder="首頁"/></div>' }const Kind = { template: '<div>分類<input type="text" placeholder="分類"/></div>' }const Cart = { template: '<div>購物車<input type="text" placeholder="購物車"/></div>' }const User = { template: '<div>我的<input type="text" placeholder="我的"/></div>' }new Vue({el: '#app',data: {type: 'home'},components: {home: Home,kind: Kind,cart: Cart,user: User,}}) </script>思考：使用keep-alive 看似保留了所有的狀態(tài)，但是如果某一個(gè)組件不要保留狀態(tài)呢
<body><div id="app"><!-- https://cn.vuejs.org/v2/api/#keep-alivekeep-alive 如何保證 不是全部的 狀態(tài)保存include - 字符串或正則表達(dá)式。只有名稱匹配的組件會(huì)被緩存。exclude - 字符串或正則表達(dá)式。任何名稱匹配的組件都不會(huì)被緩存。max - 數(shù)字。最多可以緩存多少組件實(shí)例。--><!-- include默認(rèn)就是組件的名稱, 逗號(hào)后不要添加空格 --><!-- <keep-alive include="home,kind,user"> --><!-- 在定義組件時(shí)，可以添加name屬性，include可以寫name屬性 --><!-- <keep-alive include="homeCom,kindCom,userCom"> --><!-- <keep-alive :include="['homeCom','kindCom','userCom']"> --><keep-alive :include="/homeCom|kindCom|userCom/"><component :is="type"></component></keep-alive><!-- type 對(duì)應(yīng)的是 組件的名稱 --><ul><li @click="type='home'">首頁</li><li @click="type='kind'">分類</li><li @click="type='cart'">購物車</li><li @click="type='user'">我的</li></ul></div> </body> <script src="../js/vue.js"></script> <script>const Home = { name: 'homeCom', template: '<div>首頁<input type="text" placeholder="首頁"/></div>' }const Kind = { name: 'kindCom', template: '<div>分類<input type="text" placeholder="分類"/></div>' }const Cart = { name: 'cartCom', template: '<div>購物車<input type="text" placeholder="購物車"/></div>' }const User = { name: 'userCom', template: '<div>我的<input type="text" placeholder="我的"/></div>' }new Vue({el: '#app',data: {type: 'home'},components: {home: Home,kind: Kind,cart: Cart,user: User,}}) </script>使用keep-alive之后會(huì)觸發(fā)什么鉤子函數(shù)(手機(jī)應(yīng)用程序)
<body><div id="app"><!-- 緩存的組件會(huì)自動(dòng)觸發(fā)兩個(gè)生命周期鉤子函數(shù)activated 緩存的組件 被切換顯示的時(shí)候 ---- 數(shù)據(jù)的請(qǐng)求deactivated 緩存的組件 被切換消失的時(shí)候--><keep-alive :include="/homeCom|kindCom|userCom/"><component :is="type"></component></keep-alive><!-- type 對(duì)應(yīng)的是 組件的名稱 --><ul><li @click="type='home'">首頁</li><li @click="type='kind'">分類</li><li @click="type='cart'">購物車</li><li @click="type='user'">我的</li></ul></div> </body> <script src="../js/vue.js"></script> <script>const Home = { activated(){// 數(shù)據(jù)的請(qǐng)求等},deactivated() {}, name: 'homeCom', template: '<div>首頁<input type="text" placeholder="首頁"/></div>' }const Kind = { activated(){// 數(shù)據(jù)的請(qǐng)求等},deactivated() {}, name: 'kindCom', template: '<div>分類<input type="text" placeholder="分類"/></div>' }const Cart = { name: 'cartCom', template: '<div>購物車<input type="text" placeholder="購物車"/></div>' }const User = { activated(){// 數(shù)據(jù)的請(qǐng)求等},deactivated() {}, name: 'userCom', template: '<div>我的<input type="text" placeholder="我的"/></div>' }new Vue({el: '#app',data: {type: 'home'},components: {home: Home,kind: Kind,cart: Cart,user: User,}}) </script>案例：使用動(dòng)態(tài)組件實(shí)現(xiàn)簡(jiǎn)易的步驟向?qū)Ч?/strong>
<body><div id="app"> <button @click='change("step1")'>第一步</button> <button @click='change("step2")'>第二步</button><button @click='change("step3")'>第三步</button> <keep-alive> <component :is="name"></component> </keep-alive> </div> </body> <script src="../js/vue.js"></script> <script>var step1 = {template: '<div>這是第一步的操作</div>'}var step2 = {template: '<div>這是第二步的操作</div>'} var step3 = {template: '<div>這是第三步的操作</div>'}var vm = new Vue({ el: "#app", data: { name: "step2",},components: { step1, step2, step3 },methods: { change:function(name){ this.name = name } } }) </script>7.5 組件插槽
組件的最大特性就是 重用 ，而用好插槽能大大提高組件的可重用能力。
**插槽的作用：**父組件向子組件傳遞內(nèi)容。
通俗的來講，插槽無非就是在 子組件 中挖個(gè)坑，坑里面放什么東西由 父組件 決定。
插槽類型有：
-
單個(gè)（匿名）插槽
-
具名插槽
-
作用域插槽
7.5.1 匿名插槽
匿名插槽一般就是使用單個(gè)插槽
<div id="app"><zhuban><span>cpu</span><span>顯卡</span><span>聲卡</span><span>光驅(qū)</span></zhuban></div><script src="../js/vue.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">//<slot></slot> 插槽//將調(diào)用組件的子級(jí)節(jié)點(diǎn)解析到 <slot></slot> 所對(duì)應(yīng)的位置var zhuban = {template: `<div>主機(jī)箱，零件包括：<slot></slot></div>`}/**********************************/var vm = new Vue({el: '#app',data: {},components: {zhuban}});</script>注意：子組件的 slot 標(biāo)簽中允許書寫內(nèi)容，當(dāng)父組件不往子組件傳遞內(nèi)容時(shí)， slot 中的內(nèi)容才會(huì)被展示出來。
7.5.2 具名插槽
slot 元素可以用一個(gè)特殊的特性 name 來進(jìn)一步配置如何分發(fā)內(nèi)容。多個(gè)插槽可以有不同的名字，具名插槽將匹配內(nèi)容片段中有對(duì)應(yīng) slot 特性的元素。
上中下 形式網(wǎng)頁布局示例代碼
<div id="app"><zhuban><span slot="center">cpu</span><span slot="io">顯卡</span><span slot="io">聲卡</span><span slot="io">光驅(qū)</span></zhuban></div><script src="../js/vue.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">//<slot></slot> 插槽// 將調(diào)用組件的子級(jí)節(jié)點(diǎn)解析到 <slot></slot> 所對(duì)應(yīng)的位置//具名插槽，就是給 插槽起一個(gè)名字，讓代碼解析時(shí)，按照名字解析到相應(yīng)的位置var zhuban = {template: `<div>主機(jī)箱，零件包括：<ul><li>io：<slot name="io"></slot></li><li>大腦：<slot name="center"></slot></li></ul></div>`}/**********************************/var vm = new Vue({el: '#app',data: {},components: {zhuban}});</script>具名插槽存在的意義就是為了解決在單個(gè)頁面中同時(shí)使用多個(gè)插槽。
7.5.3 作用域插槽
**應(yīng)用場(chǎng)景：**父組件對(duì)子組件的內(nèi)容進(jìn)行加工處理
作用域插槽是一種特殊類型的插槽，作用域插槽會(huì)綁定了一套數(shù)據(jù)，父組件可以拿這些數(shù)據(jù)來用，于是，情況就變成了這樣：樣式父組件說了算，但父組件中內(nèi)容可以顯示子組件插槽綁定的數(shù)據(jù)。
<body><div id="app"><app-layout><div slot-scope="props"><h1>父組件</h1>{{ props.text }}</div></app-layout></div> </body> <template id="layout"><div><slot text="我是子組件中的內(nèi)容"></slot></div> </template> <script src="lib/vue.js"></script> <script>const Com = {template: '#layout'}new Vue({el: '#app',components: {AppLayout: Com}}) </script>插槽實(shí)例，模擬element-ui封裝彈窗ui組件：
<style>/* 6.需要給 模態(tài)框的子組件寫一下樣式 */.myDialog {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.4);}.dialogMain {background: #fff;margin: 100px auto;/* width: 400px; */height: 200px;border-radius: 5px;padding: 10px;display: flex;flex-direction: column;}.myheader {height: 50px;line-height: 50px;background: lightpink;font-size: 26px;display: flex;justify-content: space-between;}.myfooter {height: 50px;line-height: 50px;background: lightgreen;}.mycontent {flex: 1;background: lightskyblue;}.dialog-footer {text-align: right;float: right;}.dialog-footer button {width: 80px;height: 40px;line-height: 40px;font-size: 20px;border-radius: 5px;margin-top: 5px;margin-right: 10px;}</style> <body><div id='app'><button @click="showDialog">點(diǎn)擊打開模態(tài)框</button><my-dialog v-show="dialogVisible" width="40%" title="我的模態(tài)框標(biāo)題" :visible.sync="dialogVisible"><!--模態(tài)框的內(nèi)容--><span>這是一段模態(tài)框信息</span><span slot="footer" class="dialog-footer"><button @click="dialogVisible = false">取 消</button><button type="primary" @click="dialogVisible = false">確 定</button></span></my-dialog></div><script type="tempalte" id="mydialog"><div class="myDialog" ><div class="dialogMain" :style="{width:width}"><div class="myheader"><span class="h_l">{{title}}</span><span class="h_r" @click="hiddenDialog">×</span></div><div class="mycontent"><!-- 7.添加匿名插槽 --><slot></slot></div><div class="myfooter"><slot name="footer"></slot></div></div></div></script><script src='./vue.js'></script><script>//可以自己封裝 ui組件 ，/*你之前有封裝過ui組件么？有封裝ui組件時(shí)都暴露了一些什么 接口？例如：封裝模態(tài)框 ，需要 使用 傳參 props 、 插槽 slot 、子組件修改父組件的狀態(tài)值 .sync模態(tài)框的 寬度、模態(tài)框的標(biāo)題、內(nèi)容 、模態(tài)框的 確定 取消的按鈕 ，模態(tài)框的關(guān)閉 等等 *///子組件var myDialog = {props: ['width', 'title'],template: `#mydialog`,methods: {hiddenDialog: function () {this.$emit('update:visible', false);}}}var vm = new Vue({el: '#app',data: {dialogVisible: false},methods: {showDialog: function () {this.dialogVisible = true;}},components: {myDialog}});</script> </body>7.7 插件
<body><div id='app'><myinput></myinput><button @click="chajianfn">調(diào)用 插件中的函數(shù)</button></div><script src='./vue.js'></script><script src="./chajian.js"></script><script>//使用插件Vue.use(baseplugin);var vm = new Vue({el: '#app',data: {},mounted() {console.log(this.$axios);this.myfn();}});console.log(vm);</script> </body>7.8 過渡效果和動(dòng)畫效果
普通手寫
<style>.box{width: 100px;height: 100px;background: hotpink;}.lee-enter-active, .lee-leave-active{transition: opacity 2s;opacity: 1;}.lee-enter, .lee-leave{opacity: 0;}</style><body><div id="app"><button @click='showType = !showType'>點(diǎn)擊/顯示/隱藏</button><transition name='lee'><div class="box" v-if='showType'></div></transition></div><script src="../vue.js"></script><script>const app = new Vue({el: '#app',data: {showType: true}})</script> </body>使用animate.css
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> <body><div id='app'><div id="example-3"><button @click="show = !show">Toggle render</button><transition name="custom-classes-transition" enter-active-class="animated wobble"leave-active-class="animated pulse"><p v-if="show">hello</p></transition></div></div><script src='./vue.js'></script><script>var vm = new Vue({el: '#app',data: {show: true}});</script> </body>7.9
使用render 實(shí)現(xiàn)虛擬dom
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/vue.js"></script><style>.box {width: 100px;height: 100px;background: lightblue;}</style> </head><body><div id="app"><!-- <div id="content" class="box"><h1>vue虛擬dom</h1><span></span>文本</div> --><mydom></mydom></div><script>/*虛擬domvar dom = {id:"content",tagName:"div",children:[{tagName:"h1",innerText:"vue虛擬dom",children:[...]},{tagName:"span",innerText:""},{text："文本"}]}*///子組件Vue.component("mydom", {render: function (cE) {return cE('div', {class: "box",style: { color: "blue" },attrs: {id: "content"}}, 'div的虛擬dom')}})var app = new Vue({el: "#app",})</script> </body></html>8. 使用 npm
8.1 先安裝node
1.官網(wǎng)下載， https://nodejs.org/zh-cn/ ， 下載長(zhǎng)期維護(hù)版
win7 請(qǐng)安裝 v10.***
在開始菜單 打開 cmd ，在cmd中 輸入 ：
如果能顯示 版本號(hào)，就證明 安裝成功了
3.在 cmd輸入 npm -v，如果能顯示版本號(hào)，就證明 npm 可以使用了
4.切換目錄
默認(rèn)是C：
如果想要到 E：
需要 在cmd 輸入 E：
切換目錄
cd www
在 www下面 創(chuàng)建一個(gè)文件夾 nodetest
cd nodetest 進(jìn)入這個(gè)文件夾
5.執(zhí)行 命令 npm init 創(chuàng)建一個(gè)新項(xiàng)目
一路回車
6.npm install --save axios 安裝 axios 的包
安裝后在 nodetest這個(gè)文件夾下面會(huì)有個(gè)node_modules的包，我們叫做依賴包
簡(jiǎn)寫方式： i 表示 install
-S 表示 --save
npm i -S swiper 安裝了swiper的包
注意： --save 或者 -S 的意思是 將 安裝的依賴的名字和版本號(hào)放到 package.json
"dependencies": {"axios": "^0.21.4","swiper": "^7.0.6"}7.指定版本號(hào)安裝
npm i -S swiper@3.4.2
9. 項(xiàng)目結(jié)構(gòu)
安裝 vue create 項(xiàng)目名
node_modules 依賴項(xiàng) 安裝的所有插件 注意：發(fā)布項(xiàng)目、上傳git 都不需要 node_modules
public 靜態(tài)文件 包括 項(xiàng)目的小圖標(biāo) index.html 、json、
src 項(xiàng)目的主目錄 (你的代碼 都寫在這里) ***
? assets 靜態(tài)文件 圖片 、css
? components 組件
? App.vue 根組件
? main.js 主入口文件
.gitignore 上傳git服務(wù)器時(shí)需要忽略的文件
babel.config.js 解析 es6語法
package.json 項(xiàng)目的包配置文件 ，配置依賴項(xiàng)
README.md 項(xiàng)目的說明文檔
yarn.lock 依賴包的鎖定
vue.config.js 手動(dòng)創(chuàng)建的 、可以擴(kuò)展 webpack 配置項(xiàng)
dependencies 開發(fā)和生產(chǎn)都需要使用的依賴
devDependencies 開發(fā)環(huán)境使用的依賴
模板文件的 style 標(biāo)簽中的 scoped 屬性 ，表示 以下的css樣式只在 本組件起作用
使用 maoyan項(xiàng)目完成貓眼的組件的寫法：
1.修改了 src/App.vue 刪除了原有代碼
<template><div id="app"></div> </template><script>export default {name: "App",components: {}, }; </script><style></style>**.vue 以vue為擴(kuò)展名的表示是一個(gè)vue文件
2.創(chuàng)建了 三個(gè)組件
src/components/myheader.vue
<template><div class="header">頭</div> </template><script> export default {name: "myheader", }; </script><style scoped> .header {width: 100%;height: 150px;background: lightblue; } </style>src/components/myfooter.vue
<template><div>尾部</div> </template><script> export default {name: "myfooter", }; </script><style> </style>src/components/mycontent.vue
3.將 組件引入到 src/App.vue
<template><div id="app"><myheader></myheader><mycontent></mycontent><myfooter></myfooter></div> </template><script> //引入組件 import myheader from "./components/myheader.vue"; import mycontent from "./components/mycontent.vue"; import myfooter from "./components/myfooter.vue"; export default {name: "App",components: {myheader,mycontent,myfooter,}, }; </script><style> * {padding: 0;margin: 0; } </style>4.安裝并引入 flexible.js
cnpm i -S lib-flexible
修改 src/main.js
//引入 vue import Vue from 'vue' //引入 App import App from './App.vue'//引入 flexible.js + import "lib-flexible";//開發(fā)環(huán)境 Vue.config.productionTip = false//創(chuàng)建 vue實(shí)例 new Vue({render: h => h(App),//渲染 }).$mount('#app') //掛載 相當(dāng)于 el:"#app"5.安裝并引入 axios
cnpm i -S axios
將 vue.config.js 拷貝過來，放到 根目錄，重啟服務(wù)器 npm run serve
修改 src/App.vue
<template><div id="app"><myheader></myheader> +- <mycontent :reyingList="reyingList"></mycontent><myfooter></myfooter></div> </template><script> //引入組件 import myheader from "./components/myheader.vue"; import mycontent from "./components/mycontent.vue"; import myfooter from "./components/myfooter.vue";//引入 axios + import axios from "axios";export default {name: "App", + data: function () { + return { + reyingList: [], + }; + },components: {myheader,mycontent,myfooter,},//下面的鉤子函數(shù)中的代碼都是新添加的mounted() {//獲取熱映列表的數(shù)據(jù)axios.get("/ajax/movieOnInfoList?token=&optimus_uuid=91EF29D0D7D811EB8CF6A1D4671CD056A65811B291BC465A975913C18F908A7E&optimus_risk_level=71&optimus_code=10").then((res) => {console.log(res);this.reyingList = res.data.movieList;});}, }; </script><style> * {padding: 0;margin: 0; } </style>修改 了 src/components/mycontent.vue
<template><div> + <ul> + <li v-for="item in reyingList" :key="item.id">{{ item.id }}</li> + </ul></div> </template><script> export default { + props: ["reyingList"],name: "mycontent", }; </script><style> </style>6.引入小圖標(biāo) iconfont
首先將你作業(yè)中的 iconfont文件夾拷貝到 項(xiàng)目 src 目錄下面
src/iconfont
修改 main.js
//引入 flexible.js import "lib-flexible";//引入 字體圖標(biāo)庫 @表示的是 src目錄 + import "@/fonts/iconfont.css";//開發(fā)環(huán)境 Vue.config.productionTip = false總結(jié)
- 上一篇： 照片放大工具Topaz Gigapixe
- 下一篇： Vue引入并使用Element-UI组件