vue常用元件通訊

props跟$emit（只能用於父子元件）

1. props：父元件向子元件傳遞資訊

父元件中：引用子元件。然後在其引用的子元件中繫結傳遞資訊
<template>
  <div>
    <Son :myprop="mypropdata"></Son>
  </div>
</template>
<script>
import Son from '@/components/Son.vue';
export default {
  data(){
    return {
      mypropdata:"父級裡的資料"
    }
  },
  components: {
    Son
  }
};
</script>

子元件中：用props:["繫結資訊"] 直接獲取
<template>
  <div>
   子元件資料:{{myprop}}
  </div>
</template>
<script>
export default {
 	props: ["myprop"],
};
</script>

2. $emit：子元件觸發父元件的自定義事件，來向父元件傳遞資訊

子元件中：觸發父級自定義事件，並傳入資料
<template>
  <div>
    <button @click="toparent">點選改變父元件</button>
  </div>
</template>
<script>
export default {
  methods: {
    toparent() {
      this.$emit("changeparent","子元件的資料")
    },
  },
};

父元件中：通過定義的自定義事件，獲取子元件傳遞的資料
<template>
  <div>
    <Son @changeparent="daddatashow"></Son>
    獲取的子元件資料：{{getdata}}
  </div>
</template>
<script>
import Son from '@/components/Son.vue';
export default {
  data(){
    return {
      getdata:""
    }
  },
  components: {
    Son
  },
  methods:{
  	 daddatashow(data) {
      this.getdata = data;
    }
  }
};
</script>

$emit 跟 $on（非父子元件）

1. 先在main.js中把eventBus設定為全域性變數（這樣各個層級就沒有限制了）

Vue.prototype.$bus = new Vue();   //這個$bus隨意命名，反正意思是新增到vue原型中

2. $emit：通過觸發事件，傳送資料

<template>
  <div>
   <button @click="toothers">點選向其他元件傳遞資訊</button>
  </div>
</template>
<script>
export default {
	methods:{
		toothers(){
			this.$bus.$emit("sendandget","傳送的資料") //這個時間名隨意定義，只要統一就行
		}
	}
}
</script>

3. $on：通過接收事件，接收資料

<template>
  <div>
    接收到的資料：{{getdata}}
  </div>
</template>
<script>
export default {
	data() {
    	return {
     	getdata:""
    };  
   created() {
    this.$bus.$on("sendandget",res=>{
      this.getdata = res;
    })
  },
}
</script>

ref 和 $refs

1. 標籤通過ref來命名
2. 使用通過this.$refs.命名 獲取ref對應標籤及內部內容

<template>
  <div>
    <div ref="mydiv">我是div</div>
    <Son ref="sonCom"></Son>
    <button @click="getSon">點選獲取children</button>
  </div>
</template>
<script>
import Son from "@/components/Son.vue";
export default {
	methods: {
     getSon(){
           console.log(this.$refs.mydiv);
           console.log(this.$refs.sonCom);
           console.log(this.$refs.sonCom.data); //子元件內部資料也能獲取
       }
    }
}
</script>


子元件Son.vue
<template>
  <div>我是子元件 </div>
</template>
<script>
export default {
   data () {
     return {
         myname:"子元件我的名字"
     }
   },
}
</script>

其他方式

1. 個人水平有限，感覺上面幾個就可以了。複雜的用vuex處理
2. $children 和 $parent
3. $attrs 和 $listeners
4. provide 和 inject