vue 不使用 vuex 进行组件间传值

前端 95

简单的传值不必非要使用 vuex

子组件向父组件传值

假设 子组件 A 向父组件 B 发送数据。
 |-compontens
 | |-- A.vue
 | |-- B.vue

子组件 A.vue 内容容下 

<template>
    <button @click="sentMessage()" >传递消息给父组件</button>
</template>

<script>
export default {
    data(){
        return{
        }
    },
    methods:{
        sentMessage:function(){
            this.$emit('NewsToFather','hi，父组件')
        }
    }
}
</script>

<style lang="scss" scoped>
</style>

使用 this.$emit() 发送一个 key 为'NewsToFather',value 为'hi，父组件' 的数据。

子组件 A 发送后消息后，需要父组件去获取这个数据

父组件 B.vue 内容如下 

<template>
      <child :message="parentMessage" @NewsToFather="showMsgFromChild"></c>
</template>

<script>
    import child from './a.vue'
    export default {
        data(){
            return{
                parentMessage: 'I am a father',
            }
        },
        methods:{
            showMsgFromChild:funcation(data){
                console.log(data) //  hi，父组件          
            }
        },
        components:{
            Child
        }
    }
</script>

<style lang="scss" scoped>
    
</style>

兄弟组件间传值

因为兄弟组件之间实际上是无法互通的，所以我们需要一个能在这两个组件之间『中转』的角色。
 假设：组件 A 和组件 B 是兄弟节点，文件结构如：
 |-compontens
 | |-- A.vue
 | |-- B.vue

这时候，我们需要一个中转文件，不妨起名为 bus.js,我把这个文件放在 assets 文件夹下
 bus.js 的内容如下： 

import Vue from 'Vue'
export default new Vue()

|-assets
 | |-- bus.js
 |-compontens
 | |-- A.vue
 | |-- B.vue

用于中转的东西有了后，我们需要让 A B组件都能和 bus 产生交流
 所以在 A.vue 和 B.vue 中的<script></script>中都加入下列代码 

<script>
import bus from '../assets/bus.js'
export default {
    //......
}
</script>

现在 A B 这个兄弟组件之间就能产生交流了，现在我们让 A 组件向 发送数据（实质上是让A组件中的 bus 发送数据）。

假设 A.vue 是如下内容 

<template>
    <button @click="sentMessage()" >传递消息给 B</button>
</template>

<script>
import bus from '../../assets/bus.js'

export default {
    data(){
        return{
          message:'你好啊，B'
        }
    },
    methods:{
        sentMessage:function(){
            let data =this.message 
            bus.$emit('NewsToB',data)
        }
    }
}
</script>

<style lang="scss" scoped>
</style>

A 组件中的 sentMessage 方法调用bus.$emit('NewsToB',data) 语句，这会让咱们的 bus 发送一个 key为'NewsToB' ，value为data 的数据。

A组件发送了内容，B组件怎么接收内容呢？

假设 B.vue 是这样的： 

<template>
</template>

<script>
import bus from '../../assets/bus.js'
export default {
    data(){
        return{
            grapevines: [],
        }
    },
    created(){
        bus.$on('NewsToB',(data)=>{
            console.log(data) //'你好啊，B'
            }
        })    
    }
}
</script>

<style lang="scss" scoped>
</style>

组件 B 让 bus 用$on 来监听，在这里我们监听的'NewsToB'正好是 A 组件让bus传递的数据，这样一来我们就在 B 组件中获取到了 A 组件的数据 

bus.$on('NewsToB',(data)=>{
    console.log(data) //'你好啊，B'
    }
})

简单总结一下，三个步骤

  1. 找一个中间角色 bus，让 AB 组件都和中间角色产生联系（important bus from '../../assets/bus.js'）
  2. A 组件中的 bus 发送一个信息（bus.$emit('NewsToB',data)）
  3. B 组件中的 bus 接受一个信息 bus.$on('NewsToB',(data)=>{}）
Comments
Write a Comment