Vue组件通信、组件传参方式有哪些？

最新推荐文章于 2024-07-17 15:44:31 发布

paopaosama

最新推荐文章于 2024-07-17 15:44:31 发布

阅读量1.3k

点赞数

文章标签： vue 组件

本文链接：https://blog.csdn.net/paopaosama/article/details/82689388

版权

1.子组件通过props接收父组件中的值，插入子组件中会跟随父组件而变化。

用法：

父组件中，引入子组件时，通过:key=''的方式传入，eg:

<children :myKey='父组件传入的值' ></children>

子组件中，通过props接收，eg:

props: {
  myKey: String
},
created(){
console.log(this.myKey,'父组件传入的值')
}

2.子组件修改父组件的值，可以使用自定义事件和$emit:

①父组件中，引入子组件时，自定义事件，eg:

<children @myEvent="fatherGet()" ></children>

②子组件中，使用this.$emit('myEvent','子组件修改的值')，进行参数的传出；eg：

methods(){
    change(){//修改父组件传参的场景
        this.$emit('myEvent','子组件修改的值')
    }
}

③父组件中，methods下的fatherGet函数即可接受参数的传入；


methods(){
    fatherGet(data){
        console.log('myEvent被触发了，携带的data是：',data,'<---子组件修改的值')
    }
}

3.非父子组件传参，跨级或同级组件传参时；通过引入新的Vue对象，结合$emit和$on传参，类似2的用法，不过两个组件均需引入同一个Vue对象；

用法：基于非父子关系的组件A和组件B；

①创建一个到处Vue对象的js:

import Vue from 'vue'
const BUS = new Vue()
export default BUS

②在组建A中引入BUS，通过$on接收参数

//位于组件A
import BUS from './BUS.js' 
BUS.$on('myEvent', (data) => {
    //这里data可以接收B组件的传参
})

③在组件B中引入BUS，通过emit传出参数

//位于组件A
import BUS from './BUS.js' 
BUS.$emit('myEvent', data)//这里data是要给组件A的传参

4.通过sessionStorage或者localStorage，在一处存入变量，在另一处取出或者修改变量；

关注