性爱有声小说在线收听,小说阅读网

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

前端框架VUE—父子組件訪問方式

有時候我們需要父組件直接訪問子組件或子組件直接訪問父組件。

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

一、父訪問子

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

1、$children

 
 
 
 
  
  
  
  //父組件中打印   
  
  
  mounted(){   
  
  
   console.log( this.$children );   
  
  
  }

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

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

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

2、$refs

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

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

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

 
 
 
 
  
  
  
  //子組件調(diào)用   
  
  
     
  
  
     
  
  
     
  
  
  //打印    
  
  
  console.log(this.$refs);

打印結(jié)果如圖：

this.$refs 返回是一個對象，如需要獲取第一個子組件時，可以使用：

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

如果組件中沒有 ref 屬性時，默認(rèn)是一個空的對象。

3、$children VS $refs

children 返回的是數(shù)組，而 refs 返回的是對象類型。

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

二、子訪問父

子組件訪問父組件時使用 $parent 。

 
 
 
 
  
  
  
  this.$parent

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

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

三、訪問根組件

訪問跟組件使用 $root 。

 
 
 
 
  
  
  
  this.$root

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

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

網(wǎng)頁名稱：前端框架VUE—父子組件訪問方式
標(biāo)題路徑：http://m.fisionsoft.com.cn/article/djepohs.html

新聞中心

一、父訪問子

1、$children

2、$refs

3、$children VS $refs

二、子訪問父

三、訪問根組件

其他資訊

一、父訪問子

2、$refs

二、子訪問父

三、訪問根組件