父元件

<template>
     <div id="app">
        <dome :msgs="mag" :adds="add" ref="doem"></dome> //子元件
     </div>
</template>

<script>

//引入子元件
import dome from '@/components/dome'

export default {
  components: {
   dome    //掛載子元件
  },
  data () {
    return {
       mag:"我是父元件資料"

    }，

   methods:{
  add(){
  console.log('我是父元件方法')

  },

    //父元件呼叫子元件方法及資料 字元件必須繫結 ref 識別符號
     fun(){
      //拿去子元件方法
       this.$refs.doem.obj
    }

  },

</script>
 

dome子元件接收父元件資料

<template>
  <div class="dome”>
   子元件
  </div>
</template>

<script>
export default {
data(){
return{
   obj:{name:"子元件"}
}

},

props:{    //接收父元件資料 mags 及 方法adds
    adds:{
      type:Function
   },
    msgs:{
       type:String
    }
    },
  },
}

</script>
 

兄弟組元件傳遞資料需要在main.JS配製

let bus = new Vue()
Vue.prototype.bus = bus

父元件

<template>

     <div id="app">

           <dome></dome> //子元件

            <card></card> //子元件 

     </div>
</template>

<script>

//引入子元件
import dome from '@/components/dome'
import card from '@/components/card'
    export default {
    components: {
   dome ,card   //掛載子元件
     }

  },

</script>
 

dome向card元件傳遞資料

<template>
   <div class=“dome”>
     <header @click="changeTitle"></header>
   </div>
</template>

<script>
export default {
data(){
return{
title:"兄弟傳值"
}
},
methods:{
changeTitle () {    //通過事件去觸發 
                     this.bus.$emit('toChangeTitle',this.title)
                }
}
}

</script>

card接收dome元件傳遞資料

<template>
  <div  class=“card”>
    {{title}}
  </div>
</template>

<script>
export default {
data(){
return{
title ： “”
}
},
mounted () {   //on方法接收兄弟傳值
                this.bus.$on('toChangeTitle', (title)=>{
                this.title = title
                        console.log(title)
        })
    },
}

</script>