## Vue組件通信 父子、兄弟、非父子 ### 1、父組件向子組件通信 **方法一：props** ~~~ <template> <child :msg="message"></child> </template> ~~~ ~~~ <template> <div>{{msg}}</div> </template> <script> export default { props: { msg: { type: String, required: true } } } </script> ~~~ **方法二：使用$children** 使用`$children`可以在父組件中訪問子組件。比如調用子組件的方法，并傳入值等。 ### 2、子組件向父組件通信 **方法一：使用vue事件** 父組件向子組件傳遞事件方法，子組件通過`$emit`觸發事件，回調給父組件。 ~~~ <template> <child @msgFunc="func"></child> </template> <script> import child from './child.vue'; export default { components: { child }, methods: { func (msg) { console.log(msg); // ssss } } } </script> ~~~ ~~~ <template> <button @click="handleClick">點我</button> </template> <script> export default { props: { msg: { type: String, required: true } }, methods () { handleClick () { //........ this.$emit('msgFunc', 'ssss'); } } } </script> ~~~ **方法二：使用$parent** 使用`$parent`可以訪問父組件的實例，當然也就可以訪問父組件的屬性和方法了。 ## 3、非父子組件、兄弟組件之間的數據傳遞 非父子組件通信，Vue官方推薦**使用一個Vue實例作為中央事件總線**。 意思就是將一個公共狀態保存在一個這些組件共用的一個父組件上，這樣就可以使用子組件通信父組件的方式來間接的完成通信了。