Vue組件創建和傳值的方法

Vue.component('father',{
 template:'<div>....<son :myName="mySonName"></son></div>',
 data(){
 return{
 mySonName:'小明'
 }
 },
 //子組件
 components:{
 son:{
 props:['myName'],
 template:'...{{myName}}'
 }
 }
 })

<div id="app">
 <father></father>
 </div>
 <script>
 Vue.component('father',{
 template:`<div>
 <p>我的兒子告訴我他叫{{mySonName}}</p>
 <son @tellFatherMyname="getMySonName"></son>
 </div>`,
 data(){
 return {
 mySonName:'???'
 }
 },
 methods:{
 getMySonName(data){
 console.log(data);
 this.mySonName = data;
 }
 },
 components: {
 son:{
 data(){
 return {
 myName :'小明'
 }
 },
 template:`
 <button @click = "emitMyname">點擊就告訴父親我叫{{myName}} 
 </button>`,
 //在子組件的methods中使用this.$emit()來傳遞值;
 //$emit()有2個參數;參數1:需要交換的事件名,參數2:要傳遞的數據;例 
 如:this.name
 methods:{
 emitMyname(){
 this.$emit('tellFatherMyname',this.myName)
 }
 }
 }
 }
 })
 var vm = new Vue({
 el:'#app',
 data:{
 }
 })
 </script>

<div id="app">
 <!-- 在此處渲染到頁面上 -->
 <father></father>
 </div>
 <script>
 //先創建一個vue空實例,作為事件總線
 var eventbus = new Vue();
 Vue.component('father',{
 //組件顯示的模板
 template:`<div>
 <son></son>
 <daughter></daughter>
 </div>`,
 components: {
 son:{
 data(){
 return {
 mySisterName:'???'
 }
 },
 //組件顯示的模板
 template:'<p>我的妹妹告訴我她叫{{mySisterName}}</p>',
 //采用鉤子函數
 //在鉤子函數中通過eventbus.$on('同一個事件名稱',data)來接收傳遞過來的數據
 mounted(){
 eventbus.$on('tellBroMyName',data=>{
 this.mySisterName = data;
 })
 }
 },
 daughter:{
 data(){
 return {
 myName:'蘭蘭'
 }
 },
 template:'<button @click="emitMyName">點擊就告訴哥哥我叫{{myName}}</button>',
 methods:{
 //只要點擊按鈕,就將事件和數據一起傳遞過去
 emitMyName(){
 eventbus.$emit('tellBroMyName',this.myName)
 }
 }
 }
 }
 })
 var vm = new Vue({
 el:'#app',
 data:{
 }
 })
 </script>