在vue元件通訊中其中最常見通訊方式就是父子元件之中的通訊，而父子元件的設定方式在不同情況下又各有不同。最常見的就是父元件為控制項子元件為檢視元件。父元件傳遞資料給子元件使用，遇到業務邏輯操作時子元件觸發父元件的自定義事件。無論哪種組織方式父子元件的通訊方式都是大同小異。
父元件到子元件的通訊主要為：子元件接受使用父元件的資料，這裡的資料報括屬性和方法（string,number,boolean,object, array ,function）。vue提倡單項資料流，因此在通常情況下都是父元件傳遞資料給子元件使用，子元件觸發父元件的事件，並傳遞給父元件所需要的引數。
父子通訊中最常見的資料傳遞方式就是通過props傳遞資料，就好像方法的傳參一樣，父元件呼叫子元件並傳入資料，子元件接受到父元件傳遞的資料進行驗證使用。
12345678
923
12<
template
>
3<
div>
4<
h3>我是子元件一
h3>
5<
span
>}
span
>
6div
>
7template
>
8<
script
>
9export
default;12
script
>
13<
style
scoped
>
14style
>
props可以接受function,所以function也可以以這種方式傳遞到子元件使用。
通過$on傳遞父元件方法是元件通訊中常用的方法傳遞方式。它可以與通過props傳遞方法達到相同的效果。相比於props傳遞function,它更加的直觀和顯示的表現出了呼叫關係。
12<
template
>
3<
div>
4<
h2>父元件
h2>
5<
br>
6<
child-one
@childevent
="parentmethod"
>
child-one
>
7div
>
8template
>
9<
script
>
10import childone from
'./childone';
1112
export
default,16
data() ;
20},
21methods: ,
25},
26};
27script
>
28<
style
scoped
>
29style
>
12<
template
>
3<
div>
4<
h3>我是子元件一
h3>
5div
>
6template
>
7<
script
>
8export
default,12
};13
script
>
14<
style
scoped
>
15style
>
準確來說這種方式並不屬於資料的傳遞而是一種主動的查詢。父元件並沒有主動的傳遞資料給子元件，而是子元件通過與父元件的關聯關係，獲取了父元件的資料。
該方法雖然能實現獲取父元件中的資料但是不推薦這種方式，因為vue提倡單向資料流，只有父元件交給子元件的資料子元件才有使用的許可權，不允許子元件私自獲取父元件的資料進行使用。在父與子的關係中子應當是處於一種被動關係。
this.$parent
此處的this為子元件例項
子元件到父元件的通訊主要為父元件如何接受子元件之中的資料。這裡的資料報括屬性和方法（string,number,boolean,object, array ,function）。
與父元件到子元件通訊中的$on配套使用，可以向父元件中觸發的方法傳遞引數供父元件使用。
12<
template
>
3<
div>
4<
h2>父元件
h2>
5<
br>
6<
child-one
@childevent
="parentmethod"
>
child-one
>
7div
>
8template
>
9<
script
>
10import childone from
'./childone';
1112
export
default,16
data() ;
20},
21methods: ) ,
25},
26};
27script
>
28<
style
scoped
>
29style
>
12<
template
>
3<
div>
4<
h3>我是子元件一
h3>
5div
>
6template
>
7<
script
>
8export
default
);11
},12
};13
script
>
14<
style
scoped
>
15style
>
可以通過在子元件新增ref屬性，然後可以通過ref屬性名稱獲取到子元件的例項。準確來說這種方式和this.$parent一樣並不屬於資料的傳遞而是一種主動的查詢。
盡量避免使用這種方式。因為在父子元件通訊的過程中。父元件是處於高位是擁有控制權，而子元件在多數情況下應該為純檢視元件，只負責檢視的展示和自身檢視的邏輯操作。對外互動的權利應該由父元件來控制。所以應當由父元件傳遞檢視資料給子元件，子元件負責展示。而子元件的對外互動通過$emit觸發父元件中相應的方法，再由父元件處理相應邏輯。
1<
template
>
2<
div>
3<
h2>父元件
h2>
4<
br>
5<
child-one
ref="child"
>
child-one
>
6div
>
7template
>
8<
script
>
9import childone from
'./childone';
1011
export
default,15
mounted(),
18};
19script
>
20<
style
scoped
>
21style
>
1 this.$refs['child']
vue父子元件之間通訊
1 父元件向子傳遞引數 只需要在子元件內使用props即可獲取。2 子元件返回引數給父元件 子元件中設定 emit func data 父元件中直接取出func即可。注意 父元件向子元件傳參是單向的，若子元件直接修改父元件的引數，vue會報錯。如果需要修改，則有2種方式 方式一 在子元件中複製父變數...
Vue元件 父子元件之間的通訊
最近在學習vue，元件之間的通訊是難點也是重點，所以想稍微總結一下。由於元件的模板無法使用父元件中的資料，所以需要用到props。prop 是你可以在元件上註冊的一些自定義特性。當乙個值傳遞給乙個 prop 特性的時候，它就變成了那個元件例項的乙個屬性。在子元件中註冊了props後，就能將父元件的資...
vue父子元件之間的通訊
父子元件 父子元件的關係 通常元件a在它的模板中使用元件b，此時元件a為父元件，元件b為子元件。父子元件應該解耦，元件例項的作用域是孤立的，子元件中不能直接使用父元件的資料。應該使用props傳遞父元件到子元件的資料，子元件通過events給父元件發訊息，以此實現父子元件間的通訊。如上，在其他元件內...