<子組件 ref=’xxx’></子組件>

父組件：

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

外部：

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

注意：子組件添加 ref 屬性,父組件才可以通過 refs 獲取.

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

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

注：如果從服務(wù)端返回的數(shù)據(jù)量較少，或者只有幾個字段，可以用vue的set方法，如果數(shù)據(jù)量較大，請直接看第二種情況。

官網(wǎng)API是這樣介紹的：

Vue.set(target,key,value)

參數(shù)：

{Object | Array} target

{string | number} key

{any} value

返回值：設(shè)置完后的新值

用法：

向響應(yīng)式對象中添加一個屬性，并確保這個新屬性同樣是響應(yīng)式的，且觸發(fā)視圖更新。它必須用于向響應(yīng)式對象上添加新屬性，因為 Vue 無法探測普通的新增屬性 (比如 this.myObject.newProperty = ‘hi’)

注意對象不能是 Vue 實例，或者 Vue 實例的根數(shù)據(jù)對象。

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

一：data中定義一個對象：

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

二：從服務(wù)端發(fā)起請求返回新數(shù)據(jù)對象：

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

這時需要把這個對象實時渲染到頁面中去

三：用 Vue.set()方法更新數(shù)據(jù)

如下所示：

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

這樣從服務(wù)端返回的新數(shù)據(jù)就實時更新到組件上了。

下面說一下第二種情況：

這種情況就是數(shù)據(jù)量較大，字段較多的，使用Vue.set()方法就有點過分了，這時我們應(yīng)該怎么做呢？

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

一：我們在data中定義一個很大的臨時對象

data() { return { myTempObj:{} // 這時一個很大的臨時對象，字段特別多 }}

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

這個對象是我們在頁面中真正用到的對象

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

三：發(fā)起異步請求，從服務(wù)端返回數(shù)據(jù)

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

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

<div v-for='(item, index) in myObj' :key='index'> {{item.name}}</div>

以上兩種情況都可以解決從服務(wù)端取到的數(shù)據(jù)不能實時更新問題，根據(jù)具體情況選擇使用！希望能給大家一個參考，也希望大家多多支持好吧啦網(wǎng)。