vue组件通讯 子传父 父传子 兄弟传值(开发实例)

 

父组件

<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>

 

 

喜欢上方小程序,需要源码的,私信关注小编留下邮箱。

来源：CSDN

作者：前端_李嘉豪

链接：https://blog.csdn.net/weixin_42460570/article/details/81059772