<子元件 ref='xxx'></子元件>

父元件：

this.refs.xxx.子元件定義的方法()

外部：

vm.$refs.xxx.子元件定義的方法()

注意：子元件新增 ref 屬性,父元件才可以通過 refs 獲取.

補充知識：vue更新data值，如何重新渲染元件？

一：先介紹一下Vue.set()方法

注：如果從服務端返回的資料量較少，或者只有幾個欄位，可以用vue的set方法，如果資料量較大，請直接看第二種情況。

官網API是這樣介紹的：

Vue.set(target,key,value)

引數：

{Object | Array} target

{string | number} key

{any} value

返回值：設定完後的新值

用法：

向響應式物件中新增一個屬性，並確保這個新屬性同樣是響應式的，且觸發檢視更新。它必須用於向響應式物件上新增新屬性，因為 Vue 無法探測普通的新增屬性 (比如 this.myObject.newProperty = ‘hi')

注意物件不能是 Vue 例項，或者 Vue 例項的根資料物件。

我舉個簡單的小例子，把這種用法介紹一下：

一：data中定義一個物件：

data() {
 return {
  person:{
  age:10,name:'李古拉雷',sex:1
  }
 }
}

二：從服務端發起請求返回新資料物件：

person:{
 age:20,name:'高圓圓',sex:0
}

這時需要把這個物件實時渲染到頁面中去

三：用 Vue.set()方法更新資料

如下所示：

methods: {
 getPerson(){
  this.$http({
  method: "post",url:this.$$baseURL + "sys/getPerson",}).then(res => {
  Vue.set(this.person,{age:res.data.age,name:res.data.name,sex:res.data.sex})
/**
* 0 更新的是位置0上的資料
*
*/
});
}
}

這樣從服務端返回的新資料就實時更新到元件上了。

下面說一下第二種情況：

這種情況就是資料量較大，欄位較多的，使用Vue.set()方法就有點過分了，這時我們應該怎麼做呢？

核心思想就是定義一個臨時變數，因computed 是計算屬性，這裡面的值更細可以實時渲染元件更新頁面。

一：我們在data中定義一個很大的臨時物件

data() {
 return {
 myTempObj:{} // 這時一個很大的臨時物件，欄位特別多
 }
}

二：我們在計算屬性中也定義一個很大的物件

這個物件是我們在頁面中真正用到的物件

computed: {
 myObj: {
  get: function(){
  return this.myTempObj; // 在這裡把臨時物件的值通過計算屬性賦值給頁面中用到的物件
  }
 },}

三：發起非同步請求，從服務端返回資料

methods: {
 getBigObj(){
  this.$http({
  method: "post",url:this.$$baseURL + "sys/getBigObj",}).then(res => {
  this.myTempObj=res.bigObj ; // 在這裡用臨時變數接受服務端返回值
});
}
}

四：頁面模板元件中使用方法

<div class="brand-list bybrand_list" v-for="(item,index) in myObj" :key="index">
 {{item.name}}
</div>

以上兩種情況都可以解決從服務端取到的資料不能實時更新問題，根據具體情況選擇使用！希望能給大家一個參考，也希望大家多多支援我們。