vue父子传值，子父传值，非父子传值具体操作

在做vue项目时，经常会遇到各种页面互传值的需求，今天把他总结出来，方便日后温故而知新！

父向子传值：

父组件写法
第一步：引入并注册子页面

 import cmpUploadProgress from '@cmp/my-upload/upload-progress' // 上传组件
 export default {
    components: {
        cmpUploadProgress
    },
 }

第二步：绑定参数

<cmpUploadProgress
    @click='getUP'
    ref="cmpUploadProgress"
    :showTip="pageType==='detail' || pageType==='approval'?false:true"
    :fileList="form.attachmentList">
</cmpUploadProgress>

第三步：触发子组件

this.$refs.cmpUploadProgress.init()
注意：this.$refs可将父子组件联系起来，也可以直接通过此方法传参列如：
      this.$refs.cmpUploadProgress.init(userId)

子组件写法

接收父组件传递过来的参数

export default {
    props: {
      showTip: {
      type: Boolean,
      default: false
    },
    fileList: {
      type: Array,
      default() {
        return []
      }
    }
    }
 }
 如果需要动态监听传递过来的参数变化：
   watch: {
    fileList(newVal) {
      this.viewFileList = newVal
    },
     immediate: true //深度监听
  },

子父传值：

因为vue中事件是单项传递的，所以我们可以用$emit触发事件来通知父组件改变数据，从而达到改变子组件数据的目的.

子组件写法

<template>
    <div @click="getup"></div>
</template>

methods: {
    getup() {
        this.$emit('hasUpdatePro', this.form.name)
    }
}

父组件写法：
第一步：引入子组件并注册

<script>
import cmpDialogProSetting from './dialog/dialog-pro-setting' 
export default {
    components: {
        cmpDialogProSetting
    }
 }
</script>

第二步：接收子组件传递过来的方法

<cmp-dialog-pro-setting ref="dialogProSetting" @hasUpdatePro="changeProName"></cmp-dialog-pro-setting>

<script>
import cmpDialogProSetting from './dialog/dialog-pro-setting' 
export default {
    components: {
        cmpDialogProSetting
    }
 }，
 methods： {
     changeProName(name) {
        console.log(name)
    }
 }
</script>
注意： name即为子组件传递过来的参数

非父子组件传值

非父子组件传值，除了可以用vuex来实现，还可以用事件总线bus来实现，eventHub就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件.具体方法如下：

第一步：在main.js中将bus注册为全局：

import Vue from 'vue'
Vue.prototype.$bus = new Vue()

//子组件发送数据
this.$bus.$emit("change",data)

//子组件接收数据
this.bus.$on("change",function(data){
})

注意：可以使用 EventBus.$off(‘change’) 来移除应用内所有对此事件的监听。
      或者直接调用EventBus.$off() 来移除所有事件频道， 注意不需要添加任何参数 。