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

·  阅读 1089

在做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() 来移除所有事件频道, 注意不需要添加任何参数 。

复制代码
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改