**：
子元件 page1.vue
單價：} 降價1元
數量: }
// 此處的price則是傳遞給子元件的值
1.5 在對應的子元件中，通過props屬性接收傳遞過來的值
props:
}1.6 在子元件中使用該值
單價：}
2.子元件向父元件中傳值 2.1 在page1.vue中，通過觸發子元件的方法(這裡是自定義的downprice方法),
單價：}
// downprice 是傳遞給父元件的事件，父元件觸發並相應這個方法
// count 傳遞給父元件的引數，在父元件中，可以對和這個引數進行相應操作
2.3 在父元件中接受子元件傳遞的事件downprice和資料
2.4 父元件對接收到的事件和資料做出相應
downprice(count)
3、父元件呼叫子元件方法
方法一：
3.1 在使用子元件時，給子元件加乙個ref引用
3.2 父元件通過this.ref
s即可找
到該子組
件，也可
以操作子
元件的方
法thi
s.
refs即可找到該子元件，也可以操作子元件的方法 this.
refs即可
找到該子
元件，也
可以操作
子元件的
方法th
is.refs.page1.子元件方法
列印出獲取到的子元件資訊：
clipboard.png
方法二：
3.3 通過chi
ldre
n,可以
獲取到所
有子元件
的集合t
his.
children,可以獲取到所有子元件的集合 this.
childr
en,可
以獲取到
所有子組
件的集合
this
.children[0].某個方法
4、子元件呼叫父元件方法
4.1 通過 par
ent可
以找到父
元件，進
而呼叫其
方法th
is
.parent可以找到父元件，進而呼叫其方法 this.
parent
可以找到
父元件，
進而呼叫
其方法t
his.
parent.父元件方法
列印出的父元件資訊
clipboard.png
5、平級元件通訊
同級元件不能直接傳值，需要乙個中間橋梁，可以先將資料傳遞給公共的父元件，然後父元件再將資料傳遞給需要的子元件。
5.1 定義乙個公共檔案 eventbus.js
**很簡單(就2句)，只是建立乙個空的vue例項
import vue from 『vue』
export default new vue()
5.2 在需要通訊的同級元件中分別引入eventbus.js檔案
import bus from 『…/eventbus.js』
5.3 在page1.vue中，通過katex parse error: expected '}', got 'eof' at end of input: … bus.emit(『pricechange』,newprice,this.count)
}5.4 在page2.vue 中，通過on接
收接收參
數和相應
事件bu
s.
on接收接收引數和相應事件 bus.
on接收接收
引數和相
應事件b
us.on(「pricechange」, (price, count) => );
一般大型的專案，推薦使用vuex來管理元件之間的通訊
vue的組將通訊方式
第一種通訊方式 父子元件通訊 1 2 1.引入子元件 import counter from counter import son from son 1 2 3 4 2.在ccmponents裡註冊子元件 components 1 3.在template裡使用子元件 1 2 3 4.如果需要傳遞資料...
Vue 二 元件間通訊
父元件中定義元素 如job 初始化 data 資料 data function 父元件中子元件標籤中定義並繫結資料 如 job job 等號左邊屬性名需和子元件定義 呼叫的寫法一樣，右邊表示父元件中的資料元素 name name job job namewasreset name event res...
VUE 元件（二）元件通訊
元件關係可分為父子元件通訊 兄弟元件通訊 跨級元件通訊。一 自定義事件 當子元件向父元件傳遞資料時，就要用到自定義事件 子元件用 emit 來觸發事件，父元件用 on 來監聽子元件事件 通過兩個按鈕實現 1 1的效果，在改變元件data中的count後，通過 emit 將值傳給父元件，父元件用v o...