超详细 vue组件通信的10种方式

已于 2023-08-03 11:14:06 修改
阅读量5.9k 收藏 53
点赞数 6
分类专栏： Vue3 文章标签： vue.js
于 2021-02-08 14:17:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pdd11997110103/article/details/113563786
版权

目录

1、父组件props传值给子组件

子组件中定义props字段，类型为Array（如需限制字段值类型，也可以定义为Object的形式）。如下例子，父组件挂载子组件helloWorld，在组件标签上给title赋值，子组件helloWorld定义了props属性，里面有一个值是title，这样子组件就可以使用父组件传递过来的值了。

  • 父组件：home.vue
<template>
  <div>
    <hello-world :title="msg" />
  </div>
</template>

<script>
import helloWorld from "../components/hello-world.vue";

export default {
  name: "home",
  data() {
    return {
      msg: "搜索音乐"
    }
  },
  components: {
    helloWorld
  }
}
</script>
  • 子组件：hello-world.vue
<template>
  <div class="hello">
    <h1>{{ title }}</h1>
  </div>
</template>

<script>
export default {
  name: "helloWorld",
  props:["title"] // 接收传递过来的值
}
</script>

1-1、props扩展属性

文档传送门

属性名值描述
typejavaScript数据类型限制props的类型
default默认值props的默认值
requiredBoolean是否必须 true为必须
validator回调函数 默认参数为props的值对props的值做处理 返回值必须是Boolean

1-2、props扩展示例

<template>
  <div class="hello">
    <h1>{{ title }}</h1>
  </div>
</template>

<script>
export default {
  name: "helloWorld",
  props: {
    title: String, // 限制必须是字符串类型
    age: {
      type: Number,
      default: 0,
      required: true,
      validator: (value) => {
        return value >= 0
      }
    },
    list: {
      type: Object,
      default: () => ({}) // 引用类型的默认值 必须用一个箭头函数返回
    }
  }
}
</script>

2、子组件$emit传值给父组件

子组件传值给父组件，需要在子组件中触发一个事件，在事件中，调用$emit(‘父组件的方法名’, ‘传递的值’)，然后在父组件中，通过在子组件标签上自定义事件函数，接收传递过来的值。

  • 父组件：home.vue
<template>
  <div>
    <hello-world @childEvent="parentEvent" />
  </div>
</template>

<script>
import helloWorld from "../components/hello-world.vue";

export default {
  name: "home",
  components: {
    helloWorld
  },
  data() {
    return {}
  },
  methods: {
    parentEvent(value) {
      // 子组件传递过来的值
      console.log(value)
    }
  }
}
</script>
  • 子组件：hello-world.vue
<template>
  <div class="hello">
    <h1 @click="handle">{{ age }}</h1>
  </div>
</template>

<script>
export default {
  name: "helloWorld",
  data() {
    return {
      age:18
    }
  },
  methods: {
    handle(){
      this.age++
      this.$emit("childEvent", this.age)
    }
  }
}
</script>

2-1、$emit传递多个参数

在$emit的第一个参数后面添加，父组件按顺序接收。或者直接传递一个Object。

// 子组件
this.$emit("childEvent", this.age, 'xxx', 'xxxx')
// or
this.$emit("childEvent", { a: 1, b: 2 })

// 父组件
parentEvent(value1, value2) {
  console.log(value1)
  console.log(value2)
}

2-2、$emit触发时的同时，父组件也传递参数

  • 父组件：home.vue
<template>
  <div>
    <hello-world @childEvent="parentEvent(arguments, '我是父组件要携带的参数')" />
  </div>
</template>

<script>
import helloWorld from "../components/hello-world.vue";

export default {
  name: "home",
  components: {
    helloWorld
  },
  data() {
    return {}
  },
  methods: {
    parentEvent(childParam, parentParam) {
      // 子组件传递过来的值，是个数组
      console.log(childParam)
      // 父组件传递的值
      console.log(parentParam)
    }
  }
}
</script>
  • 子组件：hello-world.vue
<template>
  <div class="hello">
    <h1 @click="handle">{{ age }}</h1>
  </div>
</template>

<script>
export default {
  name: "helloWorld",
  data() {
    return {
      age:18
    }
  },
  methods: {
    handle(){
      this.age++
      this.$emit("childEvent", this.age, '第二个值')
    }
  }
}
</script>

3、祖先组件provide传递孙子组件inject接收

允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。注意：provide 和 inject 绑定并不是可响应的，然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的

  • 祖先组件：ancestor.vue
<template>
 <div id="ancestor">
  <Parent :keys="keys" />
 </div>
</template>

<script>
import Parent from '../../components/parent'

export default {
 name: 'ancestor',
 components: {
  Parent
 },
 provide() {
  return {
   obj: this.obj
  }
 },
 data() {
  return {
   title: 'ancestor',
   keys: 1998,
   obj: {
    set: 'hello provide'
   }
  }
 }
}
</script>
  • 父组件：parent.vue
<template>
 <div id="parent">
  <div class="head_box">
   <Son :value="index" />
  </div>
 </div>
</template>

<script>
import Son from '../son'

export default {
 name: 'parent',
 components: {
  Title
 },
 data() {
  return {
   index: 'WoW'
  }
 }
}
</script>
  • 子组件：son.vue
<template>
 <div id="son">
  <div class="title_box">
   <p>我是 {{ obj.set }}</p>
  </div>
 </div>
</template>

<script>
export default {
 name: 'son',
 inject: {
  obj: {
   from: 'Communication',
   default: {}
  }
 },
 data() {
  return {
   index: 1
  }
 }
}
</script>

4、父组件$refs获取子组件数据

在子组件标签上写上ref属性，父组件通过this. r e f s . n a m e . 方法名或者 t h i s . refs.name.方法名或者this. refs.name.方法名或者this.refs.name.属性名的方式可以访问子组件的数据和方法

  • 父组件：parent.vue
<template>
  <div>
    <Son :title="msg" ref="hello" />
    <button @click="parentEvent">我是父亲</button>
  </div>
</template>

<script>
import Son from "../components/son.vue";

export default {
  name: "parent",
  data() {
    return {
      msg: "搜索音乐",
    };
  },

  methods: {
    parentEvent() {
      this.$refs.hello.add();
      console.log(this.$refs.hello.age);
    },
  },
  components: {
    HelloWorld
  },
};
</script>
  • 子组件：son.vue
<template>
  <div class="hello">
    <h1>{{ title }}</h1>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: ["title"],
  data() {
    return {
      age:18
    }
  },
  methods: {
    add(){
      console.log("我是子组件")
    }
  }
}
</script>

5、子组件$parent获取父组件数据

在子组件中，可以使用 p a r e n t 访问其上级父组件的数据和方法。如果是多重嵌套，也可以使用多层 parent访问其上级父组件的数据和方法。如果是多重嵌套，也可以使用多层 parent访问其上级父组件的数据和方法。如果是多重嵌套，也可以使用多层parent层层往上。

  • 父组件：parent.vue
<template>
  <div>
    <Son :title="msg" ref="hello" />
  </div>
</template>

<script>
import Son from "../components/son.vue";

export default {
  name: "parent",
  components: {
    Son
  },
  data() {
    return {
      msg: "搜索音乐",
    };
  },

  methods: {
    parentEvent() {
      console.log("我是父组件的方法");
    },
  }
}
</script>
  • 子组件：son.vue
<template>
  <div class="hello">
    <h1 @click="add">{{ title }}</h1>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: ["title"],
  data() {
    return {
      age:18
    };
  },
  methods: {
    add(){
      console.log(this.$parent.msg)
      this.$parent.parentEvent();
    }
  },
};
</script>

注：如果要找父组件的父组件，this. p a r e n t . parent. parent.parent.xxx，如此类推

6、组件 a t t r s 和 attrs和 attrs和listeners透传

a t t r s 包含了父作用域中不作为 p r o p 被识别获取的 a t t r i b u t e 绑定 ( c l a s s 和 s t y l e 除外 ) ，而 attrs包含了父作用域中不作为prop被识别获取的 attribute 绑定(class 和 style 除外)，而 attrs包含了父作用域中不作为prop被识别获取的attribute绑定(class和style除外)，而listeners则包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器

6-1、$attrs

  • 祖先组件：ancestor.vue
<template>
 <div id="ancestor">
  <Parent :keys="keys" num="3000" />
 </div>
</template>

<script>
import Parent from '../../components/parent'

export default {
 name: 'ancestor',
 components: {
  Parent
 },
 data() {
  return {
   keys: 1998
  }
 }
}
</script>
  • 父组件：parent.vue
<template>
 <div id="parent">
  <div class="head_box">
   <Son v-bind="$attrs" />
  </div>
 </div>
</template>

<script>
import Son from '../son'

export default {
 name: 'parent',
 components: {
  Son
 },
 data() {
  return {}
 }
}
</script>
  • 子组件：son.vue
<template>
 <div id="son">
  <div class="title_box">
   <p>爷爷的值：{{ $attrs.keys }}</p>
   <p>爷爷的值：{{ $attrs.num }}</p>
  </div>
 </div>
</template>

<script>
export default {
 name: 'son',
 data() {
  return {}
 }
}
</script>

6-2、$listeners

  • 祖先组件：ancestor.vue
<template>
 <div id="ancestor">
  <Parent :keys="keys" @handleChildAdd="handleAdd" />
 </div>
</template>

<script>
import Parent from '../../components/parent'

export default {
 name: 'ancestor',
 components: {
  Parent
 },
 data() {
  return {
   keys: 1998
  }
 },
 methods: {
  // 父组件的事件
  handleAdd() {
   this.keys++
  }
 }
}
</script>
  • 父组件：parent.vue
<template>
 <div id="parent">
  <div class="head_box">
   <Son v-bind="$attrs" v-on="$listeners" />
  </div>
 </div>
</template>

<script>
import Son from '../son'

export default {
 name: 'parent',
 components: {
  Son
 },
 data() {
  return {}
 }
}
</script>
  • 子组件：son.vue
<template>
 <div id="son">
  <div class="title_box">
   <p>爷爷的值：{{ $attrs.keys }}</p>
   <span @click="chlidEvent">点击触发爷爷的事件</span>
  </div>
 </div>
</template>

<script>
export default {
 name: 'son',
 data() {
  return {}
 },
 methods: {
  chlidEvent() {
   // 通过$emit调用爷爷的方法
   this.$emit('handleChildAdd')
  }
 }
}
</script>

7、事件总线event-bus

  • 先新建一个bus.js文件，在bus.js里new一个Vue实例，充当传输数据的中间层
import Vue from 'vue';
export default new Vue;
  • 在组件A中引入bus.js，通过bus.$emit(‘事件名’,‘参数’)传递参数
<template>
  <div class="hello">
    <h1 @click="add">{{ title }}</h1>
  </div>
</template>

<script>
import bus from "../publicFn/bus.js";

export default {
  name: "HelloWorld",
  props: ["title"],
  data() {
    return {
      age:18
    };
  },
  methods: {
    add(){
      bus.$emit("childEvent", this.age);
    }
  },
};
</script>
  • 在B组件mounted周期中使用$on(‘事件名’, function(){})接收
<template>
  <div id='swiper'>
    <button>我是按钮</button>
  </div>
</template>

<script>

import bus from "../publicFn/bus.js";

export default {
  name:'Swiper',
  data (){
    return {

    }
  },
  mounted(){
    bus.$on("childEvent", (e) => {
      console.log(e)
    })
  }
}
</script>

8、vue-router传值

移步：vue-router总结

9、vuex传值

移步：vuex总结

10、slot作用域传值

作用域插槽在slot上绑定属性来将子组件的信息传给父组件使用，这些属性会被挂在父组件slot-scope接受的对象上。绑定时用的key，就是父组件获取数据的键。

  • 父组件
<template>
  <div>
    <aaaChildren>
      <template #default="scope">
        <h1>{{ scope.info.age }}</h1>
      </template>
      <template #text="scope">
        <h2>{{ scope.data }}</h2>
      </template>
    </aaaChildren>
  </div>
</template>

<script>
import aaaChildren from './children/index.vue'

export default {
  name:'aaa',
  components:{
    aaaChildren
  }
}
</script>
  • 子组件
<template>
  <div class="aaa_children">
    <slot :info="user"></slot>
    <slot name="text" :data="name"></slot>
  </div>
</template>

<script>
  export default {
    name:'aaaChildren',
    props:[],
    components:{},
    data(){
      return {
        user: {
          age: 18,
          name: '小明'
        },
        name: '卡卡罗特'
      }
    }
  }
</script>

如果看了觉得有帮助的，我是@鹏多多，欢迎 点赞 关注 评论

往期文章

个人主页

鹏多多.
关注
  • 6
    点赞
  • 踩
  • 53
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue组件之间的通信
前端技术的学习整理
05-09 2194
VUE组件之间的传递数据是很重要，坑也很多，一，父组件向子组件传值1.创建子组件，在src / components /文件夹下新建一个Child.vue 2.Child.vue的中创建道具，然后创建一个名为message的属性child.png3.在App.vue中注册子组件，并在模板中加入子标签，标签中添加邮件属性并赋值App2.png4.保存修改的文件，查看浏览器browser.png5.我...
vue中组件通信的八种方式（值得收藏！）
10-16
本文将详细阐述Vue组件间通信的八种方式，并结合实例说明它们的适用场景。 1. **Props / $emit** - **父组件向子组件传值**：通过在父组件模板中使用`props`属性将数据绑定到子组件的属性上。例如，父组件`section...
VUE组件间通信的七种方式
宝子的博客
11-04 1804
根据以上对这6种组件间的通信方法，可以将不同组件间的通信分为4种类型：父子组件间通信、跨代组件间通信、兄弟组件间通信、任意组件间通信。
vue中8种组件通信方式
最新发布
weixin_53954018的博客
07-22 894
上面两种方式用于父子组件之间的通信， 而使用props进行父子组件通信更加普遍;二者皆不能用于非父子组件之间的通信。Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化. Vuex 解决了多个视图依赖于同一状态和来自不同视图的行为需要变更同一状态的问题，将开发者的精力聚焦于数据的更新而不是数据在组件之间的传递上父子组件通信:props;ref;
vue中组件间通信的6种方式
热门推荐
jiangjunyuan168的博客
01-23 4万+
前言 组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互进行直接的引用，所以组件间的相互通信是非常重要的。 除了使用vuex外还有下面6种组件间的通信方式： 1、 props / $emit 父组件通过 props 向子组件传递数据，子组件通过 $emit 和父组件通信 （1）父组件向子组件传值（props的用法） props的特点： props只能是父组件向子组件进行传值，props使得父子组件之间形成一个单向的下行绑定。子组件的数据会随着父
vue组件间通信六种方式
weixin_45035430的博客
03-03 1002
前言 组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系： image 如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。 针对不同的使用场景，如何选择行之有效的通信方式？这是我们所要探讨的主题。本文总结了vue组件间通信的几种方式，如props、emit/emit/emit/on、vuex、$parent / children、childr
vue组件通信
weixin_41989325的博客
09-17 182
Vue 组件间通信有哪几种方式？ Vue 组件间通信是面试常考的知识点之一，这题有点类似于开放题，你回答出越多方法当然越加分，表明你对 Vue 掌握的越熟练。Vue 组件间通信只要指以下 3 类通信：父子组件通信、隔代组件通信、兄弟组件通信，下面我们分别介绍每种通信方式且会说明此种方法可适用于哪类组件间通信。 （1）props / $emit 适用 父子组件通信 这种方法是 Vue 组件的基础，...
vue组件通信方式详解
YangLX的博客
03-01 159
Vue 组件间通信是面试常考的知识点之一，这题有点类似于开放题，你回答出越多方法当然越加分，表明你对 Vue 掌握的越熟练。Vue 组件间通信主要指以下 3 类通信：父子组件通信、隔代组件通信、兄弟组件通信，下面我们分别介绍每种通信方式且会说明此种方法可适用于哪类组件间通信。 （1）props / $emit 适用 父子组件通信 这种方法是 Vue 组件的基础，相信大部分同学耳闻能详，所以此处就不举例展开介绍。 （2）ref 与 $parent / $children 适用 父子组件通信 ref：如果在普通
Vue.js 父子组件通信的十种方式
01-19
面试官：Vue 中父子组件通信有哪些方式？ 自己先想一分钟。 无可否认，现在无论大厂还是小厂都已经用上了Vue.js 框架，简单易上手不说，教程详尽，社区活跃，第三方套件还多。真的是前端开发人员必备技能。而且在...
Vue组件通信的四种方式汇总
08-28
本文将详细介绍Vue组件通信的四种常见方法：父子组件通信、非父子组件的EventBus通信、使用localStorage或sessionStorage以及Vuex状态管理。 **1. 父子组件通信** 父子组件通信是最基础的通信方式，主要包括数据从...
vue组件间通信六种方式（总结篇）
01-19
前言 组件是 vue.js最强大的功能之一...本文总结了vue组件间通信的几种方式，如props、 $emit / $on 、vuex、 $parent / $children 、 $attrs / $listeners 和provide/inject，以通俗易懂的实例讲述这其中的差别及使用
vue 组件之间的通信
青蛙king的博客
08-14 4842
目录 前言 一、props 和 $emit 二、$attrs 和 $listeners 三、中央事件总线 四、provide 和 inject 五、v-model 六、$parent 和 $children 七、boradcast 和 dispatch 八、vuex 处理组件之间的数据交互 前言 参考：https://segmentfault.com/a/1190000018331900 vue 组件之间的通信方式大概有 9种： props 和 $emit $refs $at.
vue组件之间8种组件通信方式总结
zhoulu001的专栏
03-13 4万+
对于vue来说，组件之间的消息传递是非常重要的，下面是我对组件之间消息传递的各种方式的总结，总共有四种方式。 1.父子组件之间的消息传递 父组件向子组件传递数据是通过prop传递的，子组件传递数据给父组件是通过$emit触发事件来做到的。 Vue.component('child',{ data(){ return { ...
vue组件通讯
gh_0114的博客
02-18 205
vue组件通讯方式主要有如下几种： 1.props 、$emit() 父子组件通信 2.$attrs $listener 多层嵌套组件通讯 attrs：包含了父作用域中不被prop所识别 (且获取) 的特性绑定 ( class 和 style 除外 )。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 ( class 和 style 除外 )，并且可以通过 v-bind...
vue组件间通信方式
htong521的博客
12-31 2303
组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。 vue组件间的几种通信方式：props、$emit/$on、vuex、$paraent/$children、$attrs/$listeners、provide/inject. 1.父子组件间传值 父组件通过props向下传递数据给子组件。注：组件中的数据共有三种形式：data、p...
Vue组件间通信方式
pobu168的博客
10-12 739
本文描述Vue组件之间通信的几种方式：emit、$refs、$children、$parent
vue组件之间的通信方式
Wujunbin952的博客
08-09 785
vue组件之间的通信方式
Vue中组件之间8中通信方式
08-24 773
vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要，那么组件之间如何进行数据通信的呢？ 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就好像过年回家，坐着一屋子的陌生人，相互之间怎么称呼，这时就需要先知道自己和他们之间是什么样的关系。 vue组件中关系说明: 如上图所示, A与B、A与C、B与D、C与E组件之间是父子关系； B与C之间...
vue组件通信方式有哪些？
bb_xiaxia1998的博客
10-12 348
父组件通过props的方式向子组件传递数据，而通过$emit子组件可以向父组件通信。上面两种方式用于父子组件之间的通信， 而使用props进行父子组件通信更加普遍;二者皆不能用于非父子组件之间的通信。参考前端vue面试题详细解答所以，如果想要用 bus 来进行页面组件之间的数据传递，需要注意两点：一、组件A emit 事件应在beforeDestory生命周期内。二、组件B内的 on 记得要销毁Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
七种方式详解Vue组件间通信实例与技巧
本文将深入探讨Vue组件之间通信的七种主要方式，帮助开发者更好地理解和利用Vue框架中的交互机制。首先，我们将重点关注父子组件之间的通信： 1. **Props和$emit**：这是Vue中最基本的通信方式，父组件通过`props`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

鹏多多.

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

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

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

打赏作者

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

抵扣说明：

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

余额充值