一、父子组件之间传值

1、单向数据流

父组件向子组件传值，子组件不可修改父组件的传值。

父组件向子组件传值是通过参数props方式，子组件向父组件传值是通过事件触发$emit的方式

父传子

具体实现：父组件通过import引入子组件，并注册，在子组件标签上添加要传递的属性，子组件通过props接收，接收有两种形式一是通过数组形式[‘要接收的属性’ ]，二是通过对象形式{ }来接收，对象形式可以设置要传递的数据类型和默认值，而数组只是简单的接收

子传父

具体实现：子组件通过通过绑定事件触发函数，在其中设置this.$emit(‘要派发的自定义事件’，要传递的值)，$emit中有两个参数一是要派发的自定义事件，第二个参数是要传递的值然后父组件中,在这个子组件身上@派发的自定义事件,绑定事件触发的methods中的方法接受的默认值,就是传递过来的参

非props特性

父组件传，子组件不接，就会显示属性在标签上

二、非父子组件之间传值

1、通过一个bus总线来修改非父子组件的传值

（发布订阅者模式，观察者模式

通过给vue的类上挂了一个bus属性，bus属性创建了一个vue的实例，所以通过vue创建的实例上都会有bus这个属性，他们都指向同一个vue实例。

this.bus.$emit()是向外触发方法。

this.bus.$on()是监听方法

方法一：通过event bus实现

具体实现:创建一个空的vue并暴露出去，这个作为公共的bus,即当作两个组件的桥梁，在两个兄弟组件中分别引入刚才创建的bus，在组件A中通过bus.$emit（’自定义事件名’，要发送的值）发送数据，在组件B中通过bus.$on（‘自定义事件名‘,function(v) { //v即为要接收的值 }）接收数据

首先建立一个bus.js的文件，在此文件里操作

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

然后在main.js文件里导入

import EventBus from '@/bus.js'
Vue.use(EventBus)
Vue.prototype.$EventBus = EventBus

然后就可以使用了，比如在a文件里，派发这个值

this.$EventBus.$emit('uploading','sure')

在b文件里接收可以放在mounted里边

mounted() {
       this.$EventBus.$on('uploading', val=>{
       console.log(val)       //打印出来 val ：sure
     })
  }

也可以派发多个值

this.$EventBus.$emit('Click', {
        id: id,
        num:num
      })

 this.$EventBus.$on('Click', ({ id,num }) => {
       console.log(id,num)        
    })

方法二：通过vuex实现

具体实现：vuex是一个状态管理工具，主要解决大中型复杂项目的数据共享问题，主要包括state,actions,mutations,getters和modules 5个要素，主要流程：组件通过dispatch到 actions，actions是异步操作，再actions中通过commit到mutations，mutations再通过逻辑操作改变state，从而同步到组件，更新其数据状态

Vue04---父子组件之间传值、非父子组件传值

一、父子组件之间传值

1、单向数据流

非props特性

二、非父子组件之间传值

猜你喜欢