<子組件 ref='xxx'></子組件>
父組件：
this.refs.xxx.子組件定義的方法()
外部：
vm.$refs.xxx.子組件定義的方法()
注意：子組件添加 ref 屬性,父組件才可以通過(guò) refs 獲取.
補(bǔ)充知識(shí)：vue更新data值，如何重新渲染組件？
一：先介紹一下Vue.set()方法
注：如果從服務(wù)端返回的數(shù)據(jù)量較少，或者只有幾個(gè)字段，可以用vue的set方法，如果數(shù)據(jù)量較大，請(qǐng)直接看第二種情況。
官網(wǎng)API是這樣介紹的：
Vue.set(target,key,value)
參數(shù)：
{Object | Array} target
{string | number} key
{any} value
返回值：設(shè)置完后的新值
用法：
向響應(yīng)式對(duì)象中添加一個(gè)屬性，并確保這個(gè)新屬性同樣是響應(yīng)式的，且觸發(fā)視圖更新。它必須用于向響應(yīng)式對(duì)象上添加新屬性，因?yàn)?Vue 無(wú)法探測(cè)普通的新增屬性 (比如 this.myObject.newProperty = ‘hi')
注意對(duì)象不能是 Vue 實(shí)例，或者 Vue 實(shí)例的根數(shù)據(jù)對(duì)象。
我舉個(gè)簡(jiǎn)單的小例子，把這種用法介紹一下：
一：data中定義一個(gè)對(duì)象：
|
1
2
3
4
5
6
7
8
9
|
data() { return { person:{ age:10, name:'李古拉雷', sex:1 } }} |
二：從服務(wù)端發(fā)起請(qǐng)求返回新數(shù)據(jù)對(duì)象：
|
1
2
3
4
5
|
person:{ age:20, name:'高圓圓', sex:0} |
這時(shí)需要把這個(gè)對(duì)象實(shí)時(shí)渲染到頁(yè)面中去
三：用 Vue.set()方法更新數(shù)據(jù)
如下所示：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
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í)時(shí)更新到組件上了。
下面說(shuō)一下第二種情況：
這種情況就是數(shù)據(jù)量較大，字段較多的，使用Vue.set()方法就有點(diǎn)過(guò)分了，這時(shí)我們應(yīng)該怎么做呢？
核心思想就是定義一個(gè)臨時(shí)變量，因computed 是計(jì)算屬性，這里面的值更細(xì)可以實(shí)時(shí)渲染組件更新頁(yè)面。
一：我們?cè)赿ata中定義一個(gè)很大的臨時(shí)對(duì)象
|
1
2
3
4
5
|
data() { return { myTempObj:{} // 這時(shí)一個(gè)很大的臨時(shí)對(duì)象，字段特別多 }} |
二：我們?cè)谟?jì)算屬性中也定義一個(gè)很大的對(duì)象
這個(gè)對(duì)象是我們?cè)陧?yè)面中真正用到的對(duì)象
|
1
2
3
4
5
6
7
|
computed: { myObj: { get: function(){ return this.myTempObj; // 在這里把臨時(shí)對(duì)象的值通過(guò)計(jì)算屬性賦值給頁(yè)面中用到的對(duì)象 } },} |
三：發(fā)起異步請(qǐng)求，從服務(wù)端返回?cái)?shù)據(jù)
|
1
2
3
4
5
6
7
8
9
10
|
methods: { getBigObj(){ this.$http({ method: "post", url:this.$$baseURL + "sys/getBigObj", }).then(res => { this.myTempObj=res.bigObj ; // 在這里用臨時(shí)變量接受服務(wù)端返回值});}} |
四：頁(yè)面模板組件中使用方法
|
1
2
3
|
<div class="brand-list bybrand_list" v-for="(item, index) in myObj" :key="index"> {{item.name}}</div> |
以上兩種情況都可以解決從服務(wù)端取到的數(shù)據(jù)不能實(shí)時(shí)更新問(wèn)題，根據(jù)具體情況選擇使用！希望能給大家一個(gè)參考，也希望大家多多支持服務(wù)器之家。
原文鏈接：https://my.oschina.net/zhupengdaniu/blog/3049907
