vue组件间通信

1. 通过props实现

// parent
<template>
    <child :count="count"/>
</template>
<script>
    export default {
        name: 'parent',
        data() {
            return {
               count: 10 
            }
        }
    }
</script>
复制代码

// child
<template>
    <div>{count}</div>
</template>
<script>
    export default {
        name: 'child',
        data() {
            return {
               
            }
        },
        // 方式1
        props:['count']
        // 方式2
        props:{
            count: number
        }, 
        // 方式3
        props: {
            count: {
                type: number,
                default: 1
            }
        }
    }
</script>

复制代码

2. 通过事件实现子组件向父组件传值

// parent
<template>
   <child @passMsg="logMsg"/>
</template>
<script>
   export default {
       name: 'parent',
       data() {
           return {
              
           }
       },
       methods: {
           logMsg(msg){
               console.log(msg)
           }
       }
   }
</script>
复制代码

// child
<template>
    <div @click="passMsg">click me</div>
</template>
<script>
    export default {
        name: 'child',
        data() {
            return {
               
            }
        },
        methods: {
            passMsg(){
                this.$emit('changeMsg', 'It has been clicked!')
            }
        }
    }
</script>

复制代码

3. 非父子组件传值 方式同父子组件传值类似，同样采用事件emit的方式

// eventBus.js
const eventBus = new Vue()
export default eventBus
复制代码

// one component
<template>
   <div></div>
</template>
<script>
   import eventBus from './eventBus'
   export default {
       data() {
           return {
              eventBus.on('passMsg', (msg) => {
                  console.log(msg)
              })
           }
       },
       created() {
           
       }
   }
</script>
复制代码

// the other component
<template>
    <div @click="passMsg">click me</div>
</template>
<script>
    import eventBus from './eventBus'
    export default {
        data() {
            return {
               
            }
        },
        methods: {
            passMsg(){
                eventBus.$emit('changeMsg', 'It has been clicked!')
            }
        }
    }
</script>

复制代码

4. 通过配置路由实现传值

    // 在一个组件中通过路由跳转
    this.$router.push({
        name: 'page1',
        // 方式1
        query: {
            id: '11'
        },
        // 方式2
        params: {
            id: '11' 
        }
    })
    // 在另一个组件中通过获取router上的params或者query信息
    this.$router.params.id
    // 或者
    this.$router.query.id
复制代码

注：query表示url上?之后的router1?id=11&name=zhang组成的对象；params表示路由router/:id/:name中的id，name组成的对象 5. 通过vuex实现传值 --后补