vue组件通讯

vue 组件的通讯

父组件 => 子组件

在父组件中，通过 <child1 :child1="count" ></child1> :child的方式把想传递的count传递到子组件。子组件通过定义props来接受传递的参数。然后就可以使用

 props:{
      child1:{
          type:Number, //规定了参数的类型
          default:""   //规定参数的默认值
      }
  },

子组件传递给父组件

子组件传递给父组件 需要 this.$emit('name1',params) 这个样式把你想传递的参数传递出去
this.$emit('select') 。然后在父组件中 <child1 :child1="count" @select="addChild"></child1> 通过 @select 这个名字把想传递的参数传递给父组件 ，父组件定义方法，获取参数

 methods:{
    addChild(){
        this.count += 1;
    }
  },

兄弟间通过 bus 传递

需要添加一个bus 来做中间人类似。

新建bus.js 文件 里面重新new 一个Vue

import Vue from 'vue'
const Bus = new Vue()
export default Bus

在每个子组件中都引入他

import Bus from './../api/bus'  

然后 通过

   Bus.$emit('showOtherData1',this.data) //发送事件

通过：

 Bus.$on('showOtherData1', function (val) {
   console.log(val);
 })

来监听事件，就可以。

当然如果比较复杂可以使用vuex

代码

1. 父组件

   <template>
     <div>
       {{count}}
       <child1 :child1="count"  @select="addChild"></child1>
       <child2 :child2="count"  @select="addChild"></child2>
     </div>
   </template>
   
       <script>
       import Child1 from './child1'
       import Child2 from './child2'
       export default {
         data () {
           return {
             count:1
           }
         },
         components:{
           Child1,
           Child2
         },
          methods:{
           addChild(){
               this.count += 1;
           }
         },
       }
       </script>
   

2. 子组件1

   <template>
     <div @click="add">
         子组件1-----{{data}}----兄弟组件的值为{{otherdata}}
     </div>
   </template>
   
   <script>
   import Bus from './../api/bus'
   export default {
     props:{
         child1:{
             type:Number,
             default:""
         }
     },
     data(){
         return {
             'data':'',
              'otherdata':''
         }
     },
     created(){
         this.data = this.child1
         this._showOtherData()
     },
     methods:{
         add(){
             this.data += 1;
             this.$emit('select')
             Bus.$emit('showOtherData1',this.data)
         },
         _showOtherData(){
              var that = this 
               Bus.$on('showOtherData2', function (val) {
                   console.log(val);
   
                   that.otherdata = val
               })
         }
     }
   }
   </script>
   

3. 子组件2

   扫描二维码关注公众号，回复： 1030314 查看本文章

   <template>
     <div @click="add">
        子组件2-----{{data}}----兄弟组件的值为{{otherdata}}
     </div>
   </template>
   
   <script>
   import Bus from './../api/bus'
   export default {
     props:{
         child2:{
             type:Number,
             default:""
         }
     },
     data(){
         return {
             'data':'',
             'otherdata':''
         }
     },
     created(){
         this.data = this.child2
         this._showOtherData()
     },
     methods:{
         add(){
             this.data += 1;
             this.$emit('select')
              Bus.$emit('showOtherData2',this.data)
         },
         _showOtherData(){
             var that = this;
               Bus.$on('showOtherData1', function (val) {
                   console.log(val);
                   that.otherdata = val
               })
         }
   
     }
   }
   </script>