vue组件通信的几种方式

vue组件中的通信方式一共有3种，它们分别是：

1，父子组件通信

2，子父组件通信

3，兄弟组件通信

一，父子组件通信

//这是父组件 里面有一个num，把num传给子组件
<template>
  <div id="app">
    <chlidren :num="num"/>
  </div>
</template>

<script>
import chlidren from './components/chlidren'
export default {
  components:{
    chlidren
  },
  name: 'App',
  data(){
    return{
      num:1
    }
  },
  
}
</script>

<style scoped>

</style>

//子组件中用props接受即可
<template>
  <div>
    <p>{{num}}</p>
  </div>
</template>

<script>
export default {
  props:['num']
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

二，子父组件通信

<!--子组件中添加了加和减按钮，点击的时候，实现num加1或减1,这里使用的是事件$emit-->
<!--但$emit中的事件名要和父组件中的保持一至,比如这里的addnu，相应的父组件中也要有它-->
<template>
  <div>
    <button class="button" @click="addnumber">+</button>
    <button class="button" @click="cennumber">-</button>
    <p>{{num}}</p>
  </div>
</template>

<script>
export default {
  props:['num'],
  name: 'HelloWorld',
  methods:{
    addnumber(){
      this.$emit("addnu");
    },
    cennumber(){
      this.$emit("cennu")
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

<!--这里的addnu和cennu要和子组件要对应，事件名要和methods中的事件名相对应即可-->
<template>
  <div id="app">
    <chlidren :num="num" @addnu="addnumber" @cennu="cennumber"/>
  </div>
</template>

<script>
import chlidren from './components/chlidren'
export default {
  components:{
    chlidren
  },
  name: 'App',
  data(){
    return{
      num:1
    }
  },
  methods:{
    addnumber(){
      this.num++
    },
    cennumber(){
      this.num--
    }
  }
}
</script>

<style scope>

</style>

三，兄弟组件通信

       1，在router中创建一个event.js文件

        

<!--在父组件中引入这两个兄弟组件分别是module和border,命名很随便-->
<template>
  <div id="app">
    <module/>
    <border/>
  </div>
</template>

<script>
import module from './components/module'
import border from './components/border'
export default {
  components:{
    module,
    border
  },
  name: 'App'
}
</script>

<style scope>

</style>

现在要从组件A module中传递数据到组件B border中

组件A

<!--还是使用$emit-->
<template>
      <div>
           <button @click="abtn">A按钮</button>
      </div>
</template>
<script>
import eventVue from '../router/event'
export default {
      name: 'app',
      data () {
        return {
            'msg':"我是组件A"
        }
      },
      methods:{
           abtn:function(){
                eventVue.$emit("newbtn",this.msg)   //1$emit这个方法会触发一个事件
           }
      }
}
</script>

组件B

<template>
    <div>
        <div>{{btext}}</div>
    </div>
</template>
<script>
import EventVue from '../router/event'
export default{
    //在B组件中进行接收
    data(){
        return{
            btext:'B组件'
        }
    },
    created(){
        this.borbtn()
    },
    methods:{
        borbtn(){
            EventVue.$on("newbtn",(message)=>{//这里的newbtn要和A组件中的一样
                this.btext=message
            })
        }
    }
}
</script>

<style scoped>

</style>