vue中组件间的通信

最新推荐文章于 2024-07-22 21:47:11 发布

励志向上

最新推荐文章于 2024-07-22 21:47:11 发布

阅读量91

点赞数

分类专栏： vue组件间通信文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_44140231/article/details/105938429

版权

vue组件间通信专栏收录该内容

1 篇文章 0 订阅

订阅专栏

vue中组件间通信

1. 父组件向子组建通信

   <body>
      <son v-bind:sonName="name"></son>
      <script>
           Vue.component('son',{
		       props:["sonName"],
		       template:`<div>{{sonName}}</div>`
		    })
		    let vue = new Vue({
		         el:'#app',
		         data:{
		             name:'lili'
		         }
		    })
      </script>
   </body>

在上边的代码中，首先父组件里边的数据名，在html中使用子组件需要使用v-bind（：）键是子组件中props中对应的数据名，值是父组件中的数据名

2. 子组件向父组件通信

<body>
      <son v-on:send="getInfo"></son>
      <script>
           Vue.component('son',{
		       template:`<button @click ='toParent'>向父组件传递信息</button>`,
		       data:function(){
                   return {
                      info:'我是子组件的信息'
                   }
               },
               methods:{
                  toParent(){
                      this.$emit("send",this.info)
                  }
               }
		    })
		    let vue = new Vue({
		         el:'#app',
		         data:{
		             infos:'lili'
		         },
		         methods:{
                    getInfo:function(d){
                       this.infos = d
                    }
                 }
		    })
      </script>
   </body>

子组件向父组件传递信息大致分为三个步骤
1.子组件的一个点击事件中使用this.$emit(‘数据名’，传递的数据)将自己的数据传递出去
2.在html中使用子组件的地方使用v-on（@）键是数据名，值是父组件中接收数据的函数名
3.在父组件的methods中定义一个方法接收子组件传递来的数据

3. 任意组件间进行通信

<body>
      <son></son>
      <script>
          var bus = new Vue()
          Vue.component('son',{
		       template:`<button @click ='toParent'>向父组件传递信息</button>`,
		       data:function(){
                   return {
                      info:'我是子组件的信息'
                   }
               },
               methods:{
                  toParent(){
                      bus.$emit("send",this.info)
                  }
               }
		    })
		    new Vue({
		       el:'#app',
		       data:{
		          infos:''
		       }
		       mounted:function(){
		          bus.$on('send',(d)=>{
		             this.infos = d
		          })
		       }
		    })
      </script>
   </body>

任意组件间通信是不管是不是父子组件都可以进行通信
1. 定义一个空的vue实例作为传递介质 var bus = new Vue()
2. 在需要传递出去数据的组件中有一个触发事件，触发事件中使用bus. $e m i t (" 传递名 ", 传递数据) 3 . 在接收的组件的 m o u n t e d 中使用 b u s .$ on(“传递名”，d =>{接收传递过来的数据d})