Vue中组件间的通信方式

一.父子组件通信--父给子传递数据

1.在父组件中给子组件绑定属性,在子组件中用props进行接收(最简单)。

父组件

<template>
  <div id="app">
    <school :msg="msg"/>
  </div>
</template>

<script>
import student from './components/student'
import school from './components/school'
export default {
  name: 'App',
  components: {
    school
  },
  data(){
    return {
        msg:'nihao'
    }
 }
}
</script>

子组件

<template>
   <div class="box">
        {{msg}}
   </div>
</template>

<script>
import {hunhe,hunhe2} from '../mixin'
export default {
    props:['msg'],
    name:'school',
    data(){
        return{
  
        }
    }

}
</script>

2.使用vuex,在state中存储变量,在mutations定义修改的方法

//没有模块化

//访问
this.$store.state.xxxx

computed(){
    // 借助mapState生成计算属性,从state中读取数据(对象写法)
    // ...mapState({sum:'sum',school:'school',subject:'subject'}),
    // 借助mapState生成计算属性,从state中读取数据(数组写法)(当方法名和state中的属性名相同时)
      ...mapState(['sum','school','subject'])
}

//修改
this.$store.commit('方法名',参数)

methods:{
        ...mapMutations['方法名']
        // 借助mapMutations生成对应的方法,方法中的回调用commit去联系mutations(对象写法)
        ...mapMutations({increment:'JIA',decrement:'JIAN'}),

        // 借助mapMutations生成对应的方法,方法中的回调用commit去联系mutations(数组写法)
        // ...mapMutations(['JIA','JIAN']),
}

3.全局事件总线bus

在需要发送信息的一端绑定原生事件

<template>
  <div id="app">
      父组件 --{{msg}}
      <button @click="sendMsg">给子组件发信息</button>
      <myChild/>
  </div>
  
</template>

<script>
import myChild from './components/myChild'
export default {
  name:"App",
  components:{myChild},
  data(){
    return {
      msg:'nihao'
    }
  },
  methods:{
    sendMsg(){
      this.$bus.$emit('GOOD',this.msg)
    }
  }

}
</script>

<style>

</style>

子组件接受数据

<template>
  <div>
    子组件---{{ info }}
  </div>
</template>

<script>
export default {
    name:'myChild',
    data(){
        return {
            info:''
        }
    },
    mounted(){
        this.$bus.$on('GOOD',(msg)=>{
            this.info = msg
        })
    },
    beforeDestroy(){
        // 解绑
        this.$bus.$off()
    }


}
</script>

<style>

</style>

二.父子组件通信--子给父传递数据

1.在父组件中给子组件绑定函数,在子组件中用props接受。

父组件

<template>
  <div id="app">

    <!-- 通过父组件个子组件传递函数类型的props实现,子给父传递数据:子给父传递数据(第一种方法) -->
    <school :getSchoolName="getSchoolName" />
  </div>
</template>

<script>

import school from './components/school'
import student from './components/student'
export default {
  name: 'App',
  components: {
        school
  },
  data(){
    return{
      name:''
    }
  },
  methods:{
    getSchoolName(name){
      console.log('学校名称为:',name)
    }
  }
}
</script>


子组件

<template>
   <div class="box">
        <h1 >学校名称:{{name}}</h1>
        <h1>学校地址:{{address}}</h1>
      <button @click.once="sendSchoolName">把学校名给app</button>
   </div>
</template>

<script>
export default {
    props:['getSchoolName'],
    name:'school',
    data(){
        return{
          name:'上例',
          address:'beijing'
        
        }
    },
    methods:{
      sendSchoolName(){
        this.getSchoolName(this.name);
      }
    }

}
</script>

2.在父组件中给子组件绑定自定义事件,这样不用props接收,更加便捷。

父组件

<template>
  <div id="app">

    <!-- 通过父组件个子组件绑定一个自定义事件实现,子给父传递数据:子给父传递数据(第一种方法:使用v-on/@) -->
    <!-- 绑定事件在student的组件实例vc身上,通过vc实例调用 -->
    <!-- <student v-on:hander="demo"/> -->
    <student @hander="demo" @hander2="demo2"/>

    
    <!-- 通过父组件个子组件绑定一个自定义事件实现,子给父传递数据:子给父传递数据(第二种方法:使用ref) -->
    <!-- 拿到student组件的实例 this.$refs.student -->
    <student ref="student"/>
    {{name}}
  </div>
</template>

<script>
import student from './components/student'
export default {
  name: 'App',
  components: {
    student
  },
  data(){
    return{
      name:''
    }
  },
  methods:{
    demo(name,...params){
      console.log('学生的名字为:',name,params)
      // 将拿到的name,显示在app组件中
      this.name=name
    },
    demo2(){
      console.log('demo事件被触发了!')
    }
  },
  mounted(){

  },
  mounted(){
    // (第一种写法)拿到student组件的实例对象,当触发事件hander被触发后,执行函数demo()这里的this指向student组件实例
    // 但是调用了method中的方法,又指向了app当前实例。
    this.$refs.student.$on('hander',this.demo)

    // (第二种写法)第二个参数写成箭头函数,this指向实例对象app
    this.$refs.student.$on('hander',(name,...params)=>{
      console.log(name,params)
    })
    // 只触发一次.$once
    // this.$refs.student.$once('hander',this.demo)

  }
}
</script>


子组件:触发 this.$emit('自定义事件名',参数)

<template>
   <div class="box">
        <h1>学生名称:{{name}}</h1>
        <h1>学生性别:{{age}}</h1>
        <h1>number加一:{{number}}</h1>
        <button @click="add">add++</button>
    <button @click="sendName">把学生的姓名传给app</button>
    <!-- 解绑hander事件 -->
    <button @click="unbind">解绑hander事件</button>
    <!-- 销毁student的组件实例vc,同样可以解绑在student组件vc上的自定义事件,但是一般事件时不会被销毁的(原生函数也不能调用??why) -->
    <button @click="death">消除vc实例</button>
</div>
</template>

<script>
export default {
    name:'student',
    data(){
        return{
          name:'lilililili',
          age:'女',
          number:20     
        }
    },
    methods:{
      add(){
        console.log('我被触发了!')

        this.number++;
      },
      sendName(){
        // 通过this.$emit触发hander的自定义事件
        this.$emit('hander', this.name,555,666,999);
        // 第二个事件
        this.$emit('hander2')
      },
      unbind(){
        // 只适合解绑一个自定义事件
        // this.$off('hander')
        // 解绑多个事件
        // this.$off(['hander','hander2'])
        // 解绑student组件实例vc上所有自定义组件
        // this.off()
      },
      death(){
        // 销毁当前student组件的实例vc
        // 销毁后所有Student身上绑定的自定义事件全部不奏效。
        this.$destroy();
        // this.$destroy()方法会触发beforeDestroy,destroyed
      },
    }


}
</script>


3.使用vuex

4.使用全局事件总线bus,给需要发送数据的组件 this.$emit('唯一参数名',参数)

  需要接收的组件的mounted函数中

this.$bus.$on('唯一参数名',(params)=>{

        给接收到数据进行存储

        this .msg = params

} )

三.兄弟组件之间的传参

1.vuex。

2.使用全局事件总线。


在vue3中,引入了project,inject,这个适用于祖父孙以及后代组件之间的通信

provide('car',this.car)

 const car = inject('car')

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值