這篇文章將為大家詳細(xì)講解有關(guān)VueJs中怎么實(shí)現(xiàn)父子組件通訊,文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個(gè)參考,希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。
創(chuàng)新互聯(lián)公司專(zhuān)注于企業(yè)成都營(yíng)銷(xiāo)網(wǎng)站建設(shè)、網(wǎng)站重做改版、岫巖網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、html5、成都做商城網(wǎng)站、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù),價(jià)格優(yōu)惠性?xún)r(jià)比高,為岫巖等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。一、概括
在一個(gè)組件內(nèi)定義另一個(gè)組件,稱(chēng)之為父子組件。
但是要注意的是:1.子組件只能在父組件內(nèi)部使用(寫(xiě)在父組件tempalte中);
2.默認(rèn)情況下,子組件無(wú)法訪(fǎng)問(wèn)父組件上的數(shù)據(jù),每個(gè)組件實(shí)例的作用域是獨(dú)立的;
那如何完成父子如何完成通訊,簡(jiǎn)單一句話(huà):props down, events up :父組件通過(guò) props 向下傳遞數(shù)據(jù)給子組件,子組件通過(guò) events 給父組件發(fā)送
父?jìng)髯樱篜rops
子傳父:子:$emit(eventName) 父$on(eventName)
父訪(fǎng)問(wèn)子:ref
下面對(duì)三個(gè)進(jìn)行案例講解:
二、父?jìng)髯樱篜rops
組件實(shí)例的作用域是孤立的。這意味著不能 (也不應(yīng)該) 在子組件的模板內(nèi)直接引用父組件的數(shù)據(jù)。要讓子組件使用父組件的數(shù)據(jù),需要通過(guò)子組件的 props 選項(xiàng)
使用Prop傳遞數(shù)據(jù)包括靜態(tài)和動(dòng)態(tài)兩種形式,下面先介紹靜態(tài)props
1、靜態(tài)props
<script src="https://unpkg.com/vue"></script> <div id="example"> <parent></parent> </div> <script> //要想子組件能夠獲取父組件的,那么在子組件必須申明:props var childNode = { template: '<div>{{message}}</div>', props: ['message'] } //這里的message要和上面props中值一致 var parentNode = { template: ` <div class="parent"> <child message="我是"></child> <child message="徐小小"></child> </div>`, components: { 'child': childNode } }; // 創(chuàng)建根實(shí)例 new Vue({ el: '#example', components: { 'parent': parentNode } }) </script>
效果:
命名約定:
對(duì)于props聲明的屬性來(lái)說(shuō),在父級(jí)HTML模板中,屬性名需要使用中劃線(xiàn)寫(xiě)法
子級(jí)props屬性聲明時(shí),使用小駝峰或者中劃線(xiàn)寫(xiě)法都可以;而子級(jí)模板使用從父級(jí)傳來(lái)的變量時(shí),需要使用對(duì)應(yīng)的小駝峰寫(xiě)法
上面這句話(huà)什么意思呢?
<script> //這里需要注意的是props可以寫(xiě)成['my-message']或者['myMessage']都是可以的 //但是template里的屬性名,只能是駝峰式{{myMessage}},如果也寫(xiě)成{{my-message}}那么是無(wú)效的 var childNode = { template: '<div>{{myMessage}}</div>', props: ['myMessage'] } //這里的屬性名為my-message var parentNode = { template: ` <div class="parent"> <child my-message="我是"></child> <child my-message="徐小小"></child> </div>`, components: { 'child': childNode } }; </script>
如果我們childNode中的myMessage改成{{my-message}}看運(yùn)行結(jié)果:
2.動(dòng)態(tài)props
在模板中,要?jiǎng)討B(tài)地綁定父組件的數(shù)據(jù)到子模板的 props,與綁定到任何普通的HTML特性相類(lèi)似,就是用 v-bind。每當(dāng)父組件的數(shù)據(jù)變化時(shí),該變化也會(huì)傳導(dǎo)給子組件
var childNode = { template: '<div>{{myMessage}}</div>', props: ['my-message'] } var parentNode = { template: ` <div class="parent"> <child :my-message="data1"></child> <child :my-message="data2"></child> </div>`, components: { 'child': childNode }, data() { return { 'data1': '111', 'data2': '222' } } };
3、傳遞數(shù)字
初學(xué)者常犯的一個(gè)錯(cuò)誤是使用字面量語(yǔ)法傳遞數(shù)值
<script src="https://unpkg.com/vue"></script> <div id="example"> <parent></parent> </div> <script> var childNode = { template: '<div>{{myMessage}}的類(lèi)型是{{type}}</div>', props: ['myMessage'], computed: { type() { return typeof this.myMessage } } } var parentNode = { template: ` <div class="parent"> <my-child my-message="1"></my-child> </div>`, components: { 'myChild': childNode } }; // 創(chuàng)建根實(shí)例 new Vue({ el: '#example', components: { 'parent': parentNode } }) </script>
結(jié)果:
因?yàn)樗且粋€(gè)字面 prop,它的值是字符串 "1" 而不是 number。如果想傳遞一個(gè)實(shí)際的 number,需要使用 v-bind,從而讓它的值被當(dāng)作JS表達(dá)式計(jì)算
如何把String轉(zhuǎn)成number呢,其實(shí)只要改一個(gè)地方。
var parentNode = { template: ` <div class="parent"> //只要把父組件my-message="1"改成:my-message="1"結(jié)果就變成number類(lèi)型 <my-child :my-message="1"></my-child> </div>`, };
當(dāng)然你如果想通過(guò)v-bind想傳一個(gè)string類(lèi)型,那該怎么做呢?
我們可以使用動(dòng)態(tài)props,在data屬性中設(shè)置對(duì)應(yīng)的數(shù)字1
var parentNode = { template: ` <div class="parent"> <my-child :my-message="data"></my-child> </div>`, components: { 'myChild': childNode }, //這里'data': 1代表就是number類(lèi)型,'data': "1"那就代表String類(lèi)型 data(){ return { 'data': 1 } } };
三、子轉(zhuǎn)父 :$emit
關(guān)于$emit的用法
1、父組件可以使用 props 把數(shù)據(jù)傳給子組件。
2、子組件可以使用 $emit 觸發(fā)父組件的自定義事件。
子主鍵
<template> <div class="train-city"> <span @click='select(`大連`)'>大連</span> </div> </template> <script> export default { name:'trainCity', methods:{ select(val) { let data = { cityname: val }; this.$emit('showCityName',data);//select事件觸發(fā)后,自動(dòng)觸發(fā)showCityName事件 } } } </script>
父組件
<template> <trainCity @showCityName="updateCity" :index="goOrtoCity"></trainCity> //監(jiān)聽(tīng)子組件的showCityName事件。 <template> <script> export default { name:'index', data () { return { toCity:"北京" } } methods:{ updateCity(data){//觸發(fā)子組件城市選擇-選擇城市的事件 this.toCity = data.cityname;//改變了父組件的值 console.log('toCity:'+this.toCity) } } } </script>
結(jié)果為:toCity: 大連
第二個(gè)案例
<script src="https://unpkg.com/vue"></script> <div id="counter-event-example"> <p>{{ total }}</p> <button-counter v-on:increment1="incrementTotal"></button-counter> <button-counter v-on:increment2="incrementTotal"></button-counter> </div> <script> Vue.component('button-counter', { template: '<button v-on:click="increment">{{ counter }}</button>', //組件數(shù)據(jù)就是需要函數(shù)式,這樣的目的就是讓每個(gè)button-counter不共享一個(gè)counter data: function() { return { counter: 0 } }, methods: { increment: function() { //這里+1只對(duì)button的值加1,如果要父組件加一,那么就需要$emit事件 this.counter += 1; this.$emit('increment1', [12, 'kkk']); } } }); new Vue({ el: '#counter-event-example', data: { total: 0 }, methods: { incrementTotal: function(e) { this.total += 1; console.log(e); } } }); </script>
詳細(xì)講解:
1:button-counter作為父主鍵,父主鍵里有個(gè)button按鈕。
2:兩個(gè)button都綁定了click事件,方法里: this.$emit('increment1', [12, 'kkk']);,那么就會(huì)去調(diào)用父類(lèi)v-on所監(jiān)聽(tīng)的increment1事件。
3:當(dāng)increment1事件被監(jiān)聽(tīng)到,那么執(zhí)行incrementTotal,這個(gè)時(shí)候才會(huì)把值傳到父組件中,并且調(diào)用父類(lèi)的方法。
4:這里要注意第二個(gè)button-counter所對(duì)應(yīng)的v-on:'increment2,而它里面的button所對(duì)應(yīng)是this.$emit('increment1', [12, 'kkk']);所以第二個(gè)button按鈕是無(wú)法把值傳給他的父主鍵的。
示例:一個(gè)按鈕點(diǎn)擊一次那么它自身和上面都會(huì)自增1,而第二個(gè)按鈕只會(huì)自己自增,并不影響上面這個(gè)。
還有就是第一個(gè)按鈕每點(diǎn)擊一次,后臺(tái)就會(huì)打印一次如下:
四、ref ($refs)用法
ref 有三種用法
1.ref 加在普通的元素上,用this.ref.name 獲取到的是dom元素
2.ref 加在子組件上,用this.ref.name 獲取到的是組件實(shí)例,可以使用組件的所有方法。
3.如何利用v-for 和ref 獲取一組數(shù)組或者dom 節(jié)點(diǎn)
1.ref 加在普通的元素上,用this.ref.name 獲取到的是dom元素
<script src="https://unpkg.com/vue"></script> <div id="ref-outside-component" v-on:click="consoleRef"> <component-father ref="outsideComponentRef"> </component-father> <p>ref在外面的組件上</p> </div> <script> var refoutsidecomponentTem = { template: "<div class='childComp'><h6>我是子組件</h6></div>" }; var refoutsidecomponent = new Vue({ el: "#ref-outside-component", components: { "component-father": refoutsidecomponentTem }, methods: { consoleRef: function() { console.log(this.); // #ref-outside-component vue實(shí)例 console.log(this.$refs.outsideComponentRef); // div.childComp vue實(shí)例 } } }); </script>
效果:當(dāng)在div訪(fǎng)問(wèn)內(nèi)點(diǎn)擊一次:
2.ref使用在外面的元素上
<script src="https://unpkg.com/vue"></script> <!--ref在外面的元素上--> <div id="ref-outside-dom" v-on:click="consoleRef"> <component-father> </component-father> <p ref="outsideDomRef">ref在外面的元素上</p> </div> <script> var refoutsidedomTem = { template: "<div class='childComp'><h6>我是子組件</h6></div>" }; var refoutsidedom = new Vue({ el: "#ref-outside-dom", components: { "component-father": refoutsidedomTem }, methods: { consoleRef: function() { console.log(this); // #ref-outside-dom vue實(shí)例 console.log(this.$refs.outsideDomRef); // <p> ref在外面的元素上</p> } } }); </script>
效果:當(dāng)在div訪(fǎng)問(wèn)內(nèi)點(diǎn)擊一次:
3.ref使用在里面的元素上---局部注冊(cè)組件
<script src="https://unpkg.com/vue"></script> <!--ref在里面的元素上--> <div id="ref-inside-dom"> <component-father> </component-father> <p>ref在里面的元素上</p> </div> <script> var refinsidedomTem = { template: "<div class='childComp' v-on:click='consoleRef'>" + "<h6 ref='insideDomRef'>我是子組件</h6>" + "</div>", methods: { consoleRef: function() { console.log(this); // div.childComp vue實(shí)例 console.log(this.$refs.insideDomRef); // <h6 >我是子組件</h6> } } }; var refinsidedom = new Vue({ el: "#ref-inside-dom", components: { "component-father": refinsidedomTem } }); </script>
效果:當(dāng)在click范圍內(nèi)點(diǎn)擊一次:
4.ref使用在里面的元素上---全局注冊(cè)組件
<script src="https://unpkg.com/vue"></script> <!--ref在里面的元素上--全局注冊(cè)--> <div id="ref-inside-dom-all"> <ref-inside-dom-quanjv></ref-inside-dom-quanjv> </div> <script> //v-on:input指當(dāng)input里值發(fā)生改變觸發(fā)showinsideDomRef事件 Vue.component("ref-inside-dom-quanjv", { template: "<div class='insideFather'> " + "<input type='text' ref='insideDomRefAll' v-on:input='showinsideDomRef'>" + " <p>ref在里面的元素上--全局注冊(cè) </p> " + "</div>", methods: { showinsideDomRef: function() { console.log(this); //這里的this其實(shí)還是div.insideFather console.log(this.$refs.insideDomRefAll); // <input type="text"> } } }); var refinsidedomall = new Vue({ el: "#ref-inside-dom-all" }); </script>
效果:當(dāng)我第一次輸入1時(shí),值已改變出發(fā)事件,當(dāng)我第二次在輸入時(shí)在觸發(fā)一次事件,所以后臺(tái)應(yīng)該打印兩次
關(guān)于VueJs中怎么實(shí)現(xiàn)父子組件通訊就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到。
分享題目:VueJs中怎么實(shí)現(xiàn)父子組件通訊-創(chuàng)新互聯(lián)
當(dāng)前路徑:http://m.rwnh.cn/article4/dossie.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供定制開(kāi)發(fā)、關(guān)鍵詞優(yōu)化、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計(jì)、做網(wǎng)站、Google
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話(huà):028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容