大前端~vue组件间通信方式

组件间通信方式

• 父组件给子组件传值
• 子组件给父组件传值
• 不相关组件传值

1、父组件给子组件传值

//父组件
<template>
  <div id='app'>
      <child title="我是父组件传递的title"/>
  </div>
</template>

<script>
import child from './child'
export default {
    
    
  components: {
    
    
      child
  },
  data () {
    
    
    return {
    
    

    }
  }
}
</script>

//子组件
<template>
  <div id='app'>
      {
    
    {
    
    title}}
  </div>
</template>
<script>
export default {
    
    
  props:{
    
    
    title:String
  },
  components: {
    
    },
  data () {
    
    
    return {
    
    

    }
  }
}
</script>

2、子组件给父组件传值

父组件需要将触发的事件传递给子组件，字组件通过$emit触发

//父组件
<template>
  <div id='app'>
    <p :style="{fontSize:fontSize + 'px',color:'red'}">我是父组件的值</p>
    <child @changeFontSize="changeFontSize"/>
  </div>
</template> 

<script> 
import child from './child'
export default {
    
    
  components: {
    
     
      child
  },
  data () {
    
    
    return {
    
    
        fontSize:16
    }
  },
  methods:{
    
     
      changeFontSize(value){
    
    
        this.fontSize += 1;
      }
  }
}
</script>

//子组件
<template>
  <div id='app'>
      <button @click="addFontSize">点击变大</button>
  </div>
</template>

<script>
export default {
    
    
  props:{
    
    
      fontSize:Number
  },
  data () {
    
    
    return {
    
    

    }
  },
  methods:{
    
    
      addFontSize(){
    
    
          this.$emit("changeFontSize",0.1);
      }
  }
}
</script>

3、不相关组件传值（eventBus）

//component1
<template>
  <div id='app'>
      <h1>event-bus</h1>
      <button @click="sub">-</button>
      <input style="width:30px;text-align:center" :value="value"/>
      <button @click="add">+</button>
  </div>
</template>

<script>
import bus from './eventbus'
export default {
    
    
  props:{
    
    
    num:String
  },
  components: {
    
    },
  data () {
    
    
    return {
    
    
        value:12
    }
  },
  created(){
    
    
      this.value = parseInt(this.num)
  },
  methods:{
    
    
      sub(){
    
    
          if(this.value>1){
    
    
            this.value -= 1;
            bus.$emit("numchange",this.value)
          }
      },
      add(){
    
    
          this.value+=1;
          bus.$emit("numchange",this.value)
      } 
  }
}

//commponent2
<template>
  <div id='app'>
      {
    
    {
    
    msg}}
  </div>
</template>

<script>
import bus from './eventbus'
export default {
    
    
  components: {
    
    },
  data () {
    
    
    return {
    
    
        msg:'123'
    }
  },
  created(){
    
    
      bus.$on('numchange',(value)=>{
    
    
        this.msg =  `您选择了${
      
      value}件商品`
      })
  }
}

//eventbus.js
import Vue from 'vue'
export default new Vue()

//index.vue
<template>
  <div id='app'>
      <com1 num="12"/>
      <com2/>
  </div>
</template>

<script>
import com1 from './component1'
import com2 from './component2'
export default {
    
    
  components: {
    
    
      com1,com2
  },
  data () {
    
    
    return {
    
    

    }
  }
}