215  
查询码:00000050
组件之间传值/调用方法的几种方式
作者: 陈婉 于 2020年02月28日 发布在分类 / 人防组 / 人防前端 下,并于 2020年02月28日 编辑

(一)父组件向子组件传值==props

1.在父组件中使用子组件的地方绑定数据

<children :message="message"></children>
2.子组件使用props接收父组件传过来的数据
props:{
     message:String
}

3.示例:

粘贴图片

粘贴图片


(二)子组件向父组件传值==$emit,也可以用来调用父组件中的方法

1.子组件直接使用$emit将内部数据传递给父组件

this.$emit("childByValue",this.childValue);
2.父组件中接收数据
<template>
     <child @childByVlaue="childByVlaue"></dhild>
</template>
 methods:{
     childByValue:function(childValue){
          this.name=childValue;
     }
}


(三)可以通过$parent和$children获取父子组件参数

$children[i].params
this.$parent.params


(四)兄弟之间传值===Vuex

1.在state里定义数据和属性

state: {
    userName: '',
  },

2.在mutation里定义函数

mutations: {
    setUserName(state, name) {
      state.userName = name
    },
},

3.设置值

this.$store.comit('setUserName',params)
4.获取值
this.$store.state.user.userName


(五)父组件调用子组件的方法===ref

1.子组件的方法

methods:{
     childMethod(){
          alert("我是子组件的方法");
     }
}
2.父组件调用子组件的方法
<template>
     <child ref="child"></child>
     <div @click="parentMethod"></div>
</template>
methods:{
     parentMethod(){
          this.$refs.child.childMethod();
     }
}

 最新评论
当前评论数2  查看更多评论


 推荐知识

 历史版本

修改日期 修改人 备注
2020-02-28 14:57:27[当前版本] 陈婉 格式调整
2020-02-28 14:57:01 陈婉 格式调整
2020-02-28 14:56:25 陈婉 格式调整
2020-02-28 14:54:39 陈婉 格式调整

 附件

附件类型

PNGPNG

知识分享平台 -V 4.8.7 -wcp