Vue—父向子传值

1、父组件向子组件传值

1.1父组件

1.在父组件中引入子组件(调用)
import rulesMain from "../view/rules/rulesmain"; //引入规则流页面(子组件)

2.在父组件的data中定义值(注册)
 data: function() {
    return {
      editDataList: []
    };
 }
 
3.向editDataList中放值(放值)
editData(ruleId, ruleName, ruleMessage) {
      this.ruleId = ruleId;
      this.ruleName = ruleName;
      this.ruleMessage = ruleMessage;
      this.editDataList.push(this.ruleId);
      this.editDataList.push(this.ruleName);
      this.editDataList.push(this.ruleMessage);
}

4.在子组件上绑定要传给子组件的值(引用)
<rulesMain v-bind:editDataList="editDataList" />

1.2子组件—接收父组件传过来的值

1.用props来接收父组件传来的值
 props: {
    editDataList: {
      type: Array,
      required: true
    }
 }
 
2.此时在子组件中就可以使用父组件传来的值了(哪里需要哪里调用就可以了)
watch: {
    editDataList(){
      this.ruleName = this.editDataList[1];
      this.ruleNote = this.editDataList[2];
      this.queryRuleByRuleId();
    }
}

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值