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

最新推荐文章于 2024-08-11 15:47:37 发布

南栀~zmt

最新推荐文章于 2024-08-11 15:47:37 发布

阅读量715

点赞数

分类专栏： JavaScript库 # Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_46658751/article/details/122964163

版权

本文详细介绍了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向下传递数据给子组件。
【注】组件中的数据共有三种形式：data、props、computed

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

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

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: