VUE组件之间的参数传递与方法调用

IT技术2年前 (2022)发布 IT大王

0 6

父组件向子组件

父组件向子组件传参：父组件中的子组件标签中增加 :param=”param”

子组件中增加 props 接受参数（注意props需要与data同级）

props: {
  param: {
    type: Object
  }
},
data() {
    return {
        ...
    }
},

父组件调用子组件方法：父组件中子组件的标签增加 ref=”abc”

例如：

<child ref="abc"></child>

然后在父组件中使用 refs直接调用子组件方法

例如：

this.$refs.abc.XXX()

子组件调用父组件方法

父组件中子组件的标签注册方法 @abc=”XXX”

子组件中使用$emit 调用父组件方法

例如：

// 无参
this.$emit('abc')

// 带参
this.$emit('abc', {params})

子组件使用$parent

例如：

    // 方法
    this.$parent.abc()  
    // 属性
    this.$parent.abcd = 1

其它组件间调用

可以使用EventBus

在被调用的组件中使用EventBus.$on，在调用的组件中使用EventBus.$emit

例如：

被调用的组件中：

created() {
    EventBus.$off('Name')
    EventBus.$on('Name', (data1, data2) => {
        this.method(data1,data2)
    })
}

调用的组件中：

EventBus.$emit('Name', res.data.list, flag)

补充：

props的几种写法：

// 默认写法
  props: {
    btnClick: {
      type: Function,
      default: function() {}
    },
    titleName: {
      type: String,
      default: "内容"
    },
    display: {
      type: String,
      default: "table" 
    },
    columnNum: {
      type: Number,
      default: 1
    },
    columnslist: {
      type: Array,
      default() {
        return [];
      }
    },
    showPage: {
      type: Boolean,
      default: true
    },
    apiData: {
      type: Object,
      default() {
        return {};
      }
    },
    param: {
      type: Object,
      default() {
        return {};
      }
    },
    defaultParam: {
      type: Boolean,
      default() {
        return true;
      }
    }
  },

注意：如果默认值的类型为数组或者对象的话，一定要在函数中返回这个默认值，而不是直接写，否则会报错

// 正确：
 datalist:{
     type:Array,
     default:function(){
         return []
     }
 }

// 错误
 datalist:{
     type:Array,
     default:[]
 }
// 或者直接跟上面第一个代码一样，不管什么类型，都写在函数返回中。

补充2：VUE 父组件动态传值给子组件

https://blog.csdn.net/qq_36990177/article/details/109882020

# IT技术

文章版权归作者所有，未经允许请勿转载。

版权声明：
1、IT大王遵守相关法律法规，由于本站资源全部来源于网络程序/投稿，故资源量太大无法一一准确核实资源侵权的真实性；
2、出于传递信息之目的，故IT大王可能会误刊发损害或影响您的合法权益，请您积极与我们联系处理(所有内容不代表本站观点与立场)；
3、因时间、精力有限，我们无法一一核实每一条消息的真实性，但我们会在发布之前尽最大努力来核实这些信息；
4、无论出于何种目的要求本站删除内容，您均需要提供根据国家版权局发布的示范格式
《要求删除或断开链接侵权网络内容的通知》：https://itdw.cn/ziliao/sfgs.pdf，
国家知识产权局《要求删除或断开链接侵权网络内容的通知》填写说明： http://www.ncac.gov.cn/chinacopyright/contents/12227/342400.shtml
未按照国家知识产权局格式通知一律不予处理；请按照此通知格式填写发至本站的邮箱 wl6@163.com