【Vue】Vue组件间通信的方式

本文详细介绍了Vue组件间四种通信方式:props和$emit用于父子组件通信,eventBus实现任意组件间通信,$attrs与$listeners用于多级组件数据传递,最后是provide/inject的跨级组件通信。每种方式都有具体的代码示例和应用场景。
摘要由CSDN通过智能技术生成


方式一:props $emit

props $emit

  • 父组件A–>子组件B:通过props的方式

  • 子组件B–>父组件A: 通过在 B 组件中 $emit, A 组件中 v-on 的方式实现。

父组件向子组件传值:

父组件中调用子组件 给子组件的绑定的属性名赋予父组件的data、computed中的值。

子组件通过props接收父组件的值 并在子组件中使用。注意:props中接收的名字与子组件引用时的属性名相同。

  • 父组件App.vue
<template>
  <div id="app">
  <Users v-bind:usersmy="users"></Users>
  </div>
</template>

<script>
import Users from '@/components/Users'

export default {
   
  name: 'App',
  data() {
   
    return {
   
      users: ['南栀','erhei','lv']
    }
  },
  components: {
   
    Users,
  }
}
</script>

<style>

</style>
  • 子组件users.vue
<template>
  <div class="hello">
    <ul>
      <li v-for="(user,index) in usersmy" v-bind:key="index">{
   {
   user}}</li>
    </ul>
  </div>
</template>

<script>
export default {
   
  name: "Users",
  props: {
   
    usersmy: {
     
      type: Array,
      required: true
    }
  }
}
</script>

<style scoped>
  li{
   
    list-style-position: inside;
  }
</style>

【总结】父组件通过props向下传递数据给子组件。
【注】组件中的数据共有三种形式:datapropscomputed

子组件向父组件传值: 通过事件形式

子组件定义一个函数:通过调用这个函数改变父组件的值,此函数的实现方式:

methods: { 	
  	函数名(){
		this.$emit('父组件中v-on绑定的属性值','传递给父组件改变的值'); 	
	}
} 

父组件中调用子组件 通过v-on:属性名='接收函数’来实现接收子组件传递过来的值,接收函数的实现方式为:

methods: {
   
	函数名(e){
   
		改变的属性 = e;
	}
}
  • 父组件
<template>
  <div id="app">
    <Son v-on:titleChanged="updateTitle"></Son>
    <h2>{
   {
   title}}</h2>
  </div>
</template>

<script>
import Son from '@/components/Son'

export default {
   
  name: 'App',
  data() {
   
    return {
   
      title: '父组件的title'
    }
  },
  methods: 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

南栀~zmt

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值