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.在子组件上绑定要传给子组件的值(引用)

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();
    }
}

 

你可能感兴趣的:(技术成长轨迹)