[vue] 组件相互传值的几种思路

最新推荐文章于 2024-01-28 21:17:33 发布

Voices_

最新推荐文章于 2024-01-28 21:17:33 发布

阅读量125

点赞数 1

分类专栏：前端文章标签： vue.js 前端 vue

本文链接：https://blog.csdn.net/jinwenshuo2007/article/details/125209436

版权

前端专栏收录该内容

40 篇文章 0 订阅

订阅专栏

思路一：利用props

父组件→子组件：通过v-bind将数据传给子组件，子组件使用porps接收到值

<!--父组件.vue-->

<template>
    <div>
        <zizujian :fatherValue="myValue"/>
    </div>
</template>

<script>
import zizujian from "xxx"
export default{
    template:{zizujian},
    data(){
        return{
            fatherValue:'i am u father'
        }
    }
}
</script>

<!--子组件.vue-->

<template>
    <div>
        <h1>我收到了父组件的数据{{ fatherValue }}</h1>
    </div>
</template>

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

子组件→父组件：父组件通过v-bind传给子组件一个函数，函数接收一个参数。子组件props接收到函数，在合适的时候调用该函数并传值，以此来给父组件传值

<!--父组件.vue-->
提前准备一个函数，留给子组件用

<template>
    <div>
        <zizujian :faterListen="faterListen"/>
    </div>
</template>

<script>
import zizujian from "xxx"
export default{
    template:{zizujian},
    methods:{
        faterListen(sonValue){
            console.log('我是父组件，我收到了子组件的数据：',sonValue)
        }
    }
}
</script>

<!--子组件.vue-->

<template>
    <div>
        <button @click="fatherListen(sonValue)">点击给父组件传值</button>
    </div>
</template>

<script>
export default{
    props:['fatherListen'],
    data(){
        sonValue:'你好啊，我是子组件'
    }
}
</script>

--------------------------------------分界线--------------------------------------

思路二：全局事件总线（优）

安装事件总线：在main.js里创建vm的时候，增加一个生命周期钩子beforeCreate，在钩子中把VM绑定到Vue原型上，这样VUE原型上，就有VM了，就可以在项目的任意位置使用这个$bus，通过给$bus绑定事件、触发事件，就可以实现传值了

安装事件总线
<!--main.js--> 

.....

new Vue({
    el:'#app',
    render: h => h(App),
    beforeCreate(){
        Vue.prototype.$bus = this
    }
})

使用全局事件总线

<!--app.vue-->
....

绑定方式
export default{
    methods:{
        something(value){
            console.log('我收到了某组件的值',value)
        }
    },
    // APP在初始化的时候，给$bus上绑定了一个事件
    // 所以所有组件都可以触发它
    // 等事件被触发的时候，就会执行对应的方法
    mounted(){ 
        this.$bus.$on('emitSomething',this.someting)
    }
}


触发方式
this.$bus.$emit('emitSomething',value1,value2...)

--------------------------------------分界线--------------------------------------

思路三：消息订阅与发布

使用第三方库 pubsub-js 实现

安装：npm i pubsub-js

引入：import pubsub from 'pubsub-js'

订阅、发布、关闭订阅

订阅
....
import pubsub from 'pubsub-js'
export default{
    mounted(){
        this.pid = pubsub.subscribe('hello',(name,msg1,msg2)=>{
            // 回调函数：订阅了一个名字叫“hello”的消息，当有消息发给hello的时候，这里就会执行
            // 要注意：接收的第一参数是【订阅消息名】，也就是“hello”，后面的参数才是接收的数据
            // 使用this.pid接收一个订阅的id，这个id是用来关闭订阅的
        })
    },
    beforeDestroy(){
        //关闭订阅
        pubsub.unsubscribe(this.pid)
    }
}

发布
....
import pubsub from 'pubsub-js'
export default{
    methods:{
        sendMsg(){
            pubsub.publish('hello','我是消息')
        }
    }
}