日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢(xún)
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
前端框架VUE—父子組件訪問(wèn)方式

有時(shí)候我們需要父組件直接訪問(wèn)子組件 或 子組件直接訪問(wèn)父組件。

成都創(chuàng)新互聯(lián)公司是專(zhuān)業(yè)的西秀網(wǎng)站建設(shè)公司，西秀接單;提供成都網(wǎng)站制作、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè),網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專(zhuān)業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行西秀網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專(zhuān)業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專(zhuān)業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

一、父訪問(wèn)子

父訪問(wèn)子組件通常有兩種方法：一種是使用 $childre，另一種是使用$ref屬性。

1、$children

 
 
 
 
    
  
  
  
  
  1. //父組件中打印 
    2.   
  
  
  
  2. mounted(){ 
    3.   
  
  
  
  3.  console.log( this.$children ); 
    4.   
  
  
  
  4. } 
    5.

返回的結(jié)果是一個(gè)數(shù)組，由于該文件只有一個(gè)組件，所以返回是長(zhǎng)度為1 的數(shù)組。

 
 
 
 
    
  
  
  
  
  1. this.$children[0].data //返回子組件的數(shù)據(jù) 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3. this.$children[0].showMethods() //調(diào)用子組件的showMethods方法 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. this.$children[0].$el //子組件的根元素 
    6.   
  
  
  
  6. ... 
    7.

如果不包含子組件時(shí)，默認(rèn)返回空數(shù)組。

2、$refs

如果 ref 是加在普通元素上，this.$refs.name獲取到的是dom值。

如果 ref 加在組件上，this.$refs.name 獲取到的是組件實(shí)例，可以使用組件的所有方法。

ref 使用實(shí)例如下：

 
 
 
 
    
  
  
  
  
  1. //子組件調(diào)用 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. //打印  
    6.   
  
  
  
  6. console.log(this.$refs); 
    7.

打印結(jié)果如圖：

this.$refs 返回是一個(gè)對(duì)象，如需要獲取第一個(gè)子組件時(shí)，可以使用：

 
 
 
 
    
  
  
  
  
  1. this.$refs.cld 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3. this.$refs.cld.data //子組件的數(shù)據(jù) 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. this.$refs.cld.showMethods() //調(diào)用子組件的方法 
    6.

如果組件中沒(méi)有 ref 屬性時(shí)，默認(rèn)是一個(gè)空的對(duì)象。

3、$children VS $refs

children 返回的是數(shù)組，而 refs 返回的是對(duì)象類(lèi)型。

使用children獲取子組件件時(shí)，易受到其他組件干擾，較容易出錯(cuò)，所以children 很少使用。經(jīng)常使用 $ref 獲取子組件。

二、子訪問(wèn)父

子組件訪問(wèn)父組件時(shí)使用 $parent 。

 
 
 
 
    
  
  
  
  
  1. this.$parent 
    2.

返回的是一個(gè)對(duì)象。一般開(kāi)發(fā)中很少使用，因?yàn)樽咏M件拿父組件的數(shù)據(jù)，會(huì)導(dǎo)致兩個(gè)組件的耦合度過(guò)高，當(dāng)子組件是一個(gè)公共組件，哪里都可以引入使用時(shí)，這時(shí)其它地方引入這個(gè)子組件時(shí)就會(huì)出問(wèn)題。

vue 開(kāi)發(fā)的項(xiàng)目最大特點(diǎn)就是，開(kāi)發(fā)出一個(gè)一個(gè)獨(dú)立的可復(fù)用的小組件，來(lái)構(gòu)建大型應(yīng)用。所以 $parent 基本不使用。

三、訪問(wèn)根組件

訪問(wèn)跟組件使用 $root 。

 
 
 
 
    
  
  
  
  
  1. this.$root 
    2.

返回的是 vue 的實(shí)例化對(duì)象。

 
 
 
 
    
  
  
  
  
  1. this.$root.$el //根元素 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3. this.$root.data //vue實(shí)例中數(shù)據(jù) 
    4.

分享標(biāo)題：前端框架VUE—父子組件訪問(wèn)方式
轉(zhuǎn)載來(lái)于：http://m.5511xx.com/article/djepohs.html