Vue--组件通信的几种方式

一，不同层级组件通信（传值）

1，父组件  <--->  子组件

--- v-bind，props---：父传子

  • 在渲染的子组件上使用 v-bind 绑定要传递的父组件的数据；
  • 在渲染的子组件上使用 v-bind 绑定要传递的父组件的 数据；

---v-on，$emit（）---：子传父

  • 在渲染的子组件标签名上使用 v-on 绑定要传递的父组件的 methods；
  • 在子组件中使用  this.$emit()  调用事件名，调用的同时传递子组件的数据；
复制代码
 1 <body>
 2   <div id="app">
 3     <comm1 :father="mesg" @get="data"></comm1>
 4     <comm1></comm1>
 5     <h3>--父组件部分----</h3>
 6     <p>{{child}}</p>
 7   </div>
 8   <script src="../lib/vue.js"></script>
 9   <script>
10     const Comm1 = {
11       // props:['father'],
12       props:{
13         father:{
14           typeof:String,
15           default:'默认值'
16         }
17       },
18       data:()=>({
19         data:'子组件数据'
20       }),
21       template:`<div><h3>--子组件部分--</h3>
22     <p>{{father}}</p>
23     <button @click="updata">更新父组件的数据</button></div>`,
24       methods:{
25         updata(){
26           this.$emit('get',this.data)
27         }
28       }
29     }
30     new Vue({
31       el: "#app",
32       data: {
33         mesg:'父组件数据',
34         child:''
35       },
36       components:{
37         Comm1
38       },
39       methods:{
40         data(v){
41           console.log(v);
42           this.child = v
43         }
44       }
45     })
46   </script>
47 </body>
复制代码

 

2，获取父组件数据，获取子组件数据

---$parent，$root---：获取父组件数据，根组件数据。

---$refs  ref---：获取子组件的数据。 需要先在子组件上标记ref属性；

复制代码
 1 <body>
 2   <div id="app">
 3     <h2 ref="h2data">标题</h2>
 4     <child ref="childdata"></child>
 5   </div>
 6   <script src="../lib/vue.js"></script>
 7   <script>
 8     const child = {
 9       data(){
10         return {
11           mesg:'子组件的数据'
12         }
13       },
14       template:`
15         <div>
16           <h1>{{mesg}}</h1>  
17           <button @click="getparant">click</button>
18         </div>
19       `,
20       methods:{
21         getparant(){
22           console.log('通过$parent获取：' + this.$parent.parant)
23           console.log('通过$root获取：' + this.$root.parant);
24         }
25       }
26     }
27 
28     new Vue({
29       el: "#app",
30       data: {
31         parant:'父组件的数据'
32       },
33       components:{
34         child
35       },
36       mounted(){
37         console.log(this.$refs.h2data);
38         console.log(this.$refs.childdata);
39       }
40     })
41   </script>
42 </body>
复制代码

 

3，爷级组件    <---->   孙级组件

--- $attrs + $listeners---：跨爷孙级，桥接；

复制代码
 1 <body>
 2   <div id="app">
 3     <h1>{{data}}</h1>
 4     <parent :data="first" @click="get"></parent>
 5   </div>
 6   <script src="../lib/vue.js"></script>
 7   <script>
 8     const sun = {
 9       template:`
10         <div>
11           <h3>孙子</h3>
12           <p>{{this.$attrs.data}}</p>
13           <button @click="$emit('click','谢谢')">click</button>  
14         </div>
15       `,
16       methods:{
17 
18       }
19     }
20     const parent = {
21       template:`
22         <div>
23           <h3>儿子</h3>  
24           <sun v-bind="$attrs" v-on="$listeners"></sun>  
25         </div>
26       `,
27       components:{
28         sun
29       }
30     }
31 
32     new Vue({
33       el: "#app",
34       data: {
35         data:'爷爷',
36         first:'爷爷的数据'
37       },
38       components:{
39         parent
40       },
41       methods:{
42         get(data){
43           console.log(data);
44         }
45       }
46     })
47   </script>
48 </body>
复制代码

 

4，跨所有级别组件通信

---provide + inject---：可跨任意层级；

复制代码
 1 <body>
 2   <div id="app">
 3     <h1>爷</h1>
 4     <two></two>
 5   </div>
 6   <script src="../lib/vue.js"></script>
 7   <script>
 8     const one = {
 9       inject:['pdata','pfn','pfn1'],
10       data(){
11         return{
12           log:'12345'
13         }
14       },
15       template:`
16         <div>
17           <h3>孙</h3>
18           <p>{{pdata}}</p>
19           <button @click="pfn(log)">click</button>  
20           <button @click="test">click1</button>  
21         </div>
22       `,
23       methods:{
24         test(){
25           this.pfn1.get(1)
26         }
27       }
28     }
29     
30     const two = {
31       inject:['pdata'],
32       template:`
33         <div>
34           <h2>儿</h2>
35           <p>{{pdata}}</p>  
36           <one></one>
37         </div>
38       `,
39       components:{
40         one
41       }
42     }
43     new Vue({
44       el: "#app",
45       data: {
46         
47       },
48       provide:{
49         pdata:'传递的数据',
50         pfn(v){
51             console.log(v);
52         },
53         pfn1:{
54           get(v){
55             console.log(v);
56           }
57         }
58       },
59       components:{
60         two
61       }
62     })
63   </script>
64 </body>
复制代码

 

二，同级组件通信（传值）

1，父传子，然后子在传给兄弟组件；

  • 在定义好的  Vue  实例中，先父传子，然后再子传父；
  • 在发送方利用 $emit(‘事件名’，数据)  来传递数据；
  • 在接收方使用父传子的方法  v-on绑定 和 props  来接收数据；

 

2，事件总线；

  • 通过新的Vue实例做中介，在子组件引入，再$emit出去，兄弟组件$on监听；

3，vuex

  • new Vuex.Store，挂载到Vue.ues实例，子组件$store.state访问，改变时$store.commit出去，在store的mutation设置
 
 
 
 
 
 
posted @   AVEGER  阅读(65)  评论(0)  编辑  收藏  举报
相关博文：
·  Vue--vuex：组件的取值，值的操作
·  Vue项目优化随笔
·  VUE学习-组件通信
·  最干货最详细的vue组件通信教程
·  vue组件通信的n种方式
阅读排行：
· winform 绘制太阳，地球，月球 运作规律
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 上周热点回顾（3.3-3.9）
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
点击右上角即可分享
微信分享提示