Vue 组件间数据共享

1.父组件向子组件传递数据

子组件定义props数组，数组中是自定义属性名，父组件导入子组件，使用子组件定义属性，当做标签属性进行绑定数据传值

//自定义子类
<template>
<h1>{{ count }}</h1>
</template>
<script>
    export default {
        props:{
            count:{
                type:Number
            }
        }
    }
</script>

//自定义父类
<template>
<son :count="parentSon"></son>
</template>
<script>
import son from './son.vue'
    export default {
        components:{
            son
        },
        data(){
            return{
                parentSon:1
            }
        }
    }
</script>

 2.子组件向父组件传递数据

在子组件中通过emits数组自定义事件，可以在组件调用方法的时候来触发自定义事件向父组件传值，父组件要用自定义事件来接收子组件传来的值

//自定义子组件
<template>
<p>count:{{ count }}</p>
<button @click="add"></button>
</template>
<script>
export default {
    name: 'sonTem',
    emits:['caoleng'],
    data(){
        return{
            count:0

        }
    },
    methods:{
        add(){
            this.count = this.count + 1 
            this.$emit('caoleng',this.count)
        }
    }
  }
</script>

//自定义父类
<template>
<sonTem @caoleng="chang"></sonTem>
</template>
<script>
import sonTem from './sonTem.vue'
export default {
  components: {
    sonTem
  }
  ,methods:{
    chang(e){
        console.log('触发了子组件的caoleng事件'+e)
    }
  }
}
</script>

 3.父子组件数据双向绑定

子组件可以通过props来接收父组件传来的数据，当我们想把父类传来的数据改变时候同步到父类绑定的数据的时候可以在父类使用v-model来改变父类数据，无需在父类中定义函数接收

//自定义子组件
<template>
    <p>count:{{ numb }}</p>
    <button @click="add">按钮</button>
</template>
<script>
export default {
    props:{
        numb:{
            type:Number
        }
    },
    emits:['caoleng','update:numb'],
    data(){
        return{
            count:0,
            nub:0
        }
    },
    methods:{
        add(){
            this.$emit('update:numb',this.numb+1)
        }
    }
}
</script>
      

//自定义父组件
<template>
    <p>count:{{ count }}</p>
    <button @click="add">count+1</button>
    <TestMyModel2 v-model:numb="count"  ></TestMyModel2>
</template>
<script>
import TestMyModel2 from './testMyModel2.vue';
      export default {
    data() {
        return {
            count: 0
        };
    },
    methods: {
        add() {
            this.count = this.count + 1;
        }
    },
    components: { TestMyModel2 }
}
      </script>
      

 4，兄弟组件数据共享

 使用eventBus，下载插件

npm i mitt@2.1.0 -S

编写eventBus.js

import mitt from 'mitt'
const bus = mitt()
export default bus

eventBus通过自定义事假来达到兄弟组件间的数据传递，接收数据的通过on来接收事件的触发，拿到数据

//根组件
<template>
<div>
<left></left>
<right></right>
</div>
</template>
<script>
import left from './left.vue'
import right from './right.vue'
export default {
    components:{
        left,right
    }
}
</script>
<style scoped>
div{
    display: flex;
}
</style>

//left
<template>
<div>
    <h1>{{ count }}</h1>
    <button @click="tosend">left</button>
</div>
</template>
<script>
import bus from './eventBus/eventBus.js'
export default {
    data(){
        return{
            count : 0

        }
    },
    created(){
        bus.on('changCount',(e)=>{
            this.count = e
        })
    },
    methods:{
        tosend(){

        }
    }
}
</script>
<style scoped>
div{
    height: 200px;
    width: 200px;
}
</style>
    

//right
<template>
<div>
    <h1>{{ count }}</h1>
    <button @click="tosend">right</button>
</div>
</template>
<script>
import bus from './eventBus/eventBus.js'
export default {
    data(){
        return{
            count : 0
        }
    },
    methods:{
        tosend(){
            this.count= this.count +1 
        bus.emit('changCount',this.count) 
        }
    }
}
</script>
<style scoped>
div{
    height: 200px;
    width: 200px;
}
</style>
    

5.父节点传递共享数据

父组件通过provide来提供共享数据，子孙组件通过inject来接收共享数据

//父组件
<template>
<Twolevel></Twolevel>
</template>
<script>
import Twolevel from './twolevel.vue';

    export default {
    components: { Twolevel },
    data(){
        return{
            color:'red'
        }
    },
    provide(){
        return{
            color:this.color
        }
    }
}
</script>

//子组件
<template>
<Threelevel></Threelevel>
</template>
<script>
import Threelevel from './threelevel.vue';
    export default {
    components: { Threelevel }
}
</script>

//孙组件
<template>
<h1>{{ color }}</h1>
</template>
<script>
    export default {
        inject:['color']
    }
</script>