vue使用中的父子组件之间传参的方法

1.父组件传参到子组件中

父组件中的用法:
1引入组件
import selfAbility from './children/selfAbility';
2.在组件中申明:
components: {
   selfAbility
 },
3.页面中使用
 <selfAbility :score="scoreParent"></selfAbility>
 其中score是与子页面中的 变量名对应上,scoreParent是父页面的 数据

子组件中用法:
1.在script中声明一下
props: {
    score: {
        type:Object
    }
}
2.在初始化渲染的方法中就获取到此 score的值
created() {
    this.initLineScore();
}
在这个方法中可以获取到score从父页面传过来的值

二.从父组件获取子组件中的数据

子页面中的写法:
<el-col :span="24" class="title textCenter">
    自身耐蚀能力得分:<el-input v-model="resultScore" placeholder="请输入分数" @change="scoreSave"></el-input> 分
</el-col>
在方法scoreSave中用$emit方法
scoreSave() {
    this.scoreData.evaluatScore = this.resultScore;
    this.scoreData.evaluatConfigInfo = {
        technicalStandard: {
            score: this.firstLineScore,
            type: this.radio1
        },
        meetDemand: {
            score: this.secondLineScore,
            type: this.radio2
        },
        partialFailure: {
            score: this.thirdLineScore,
            type: this.radio3
        },
        reasonable: {
         score: this.resultScore,
            type: this.radio4
        },
        total:this.resultScore
    }
    this.$emit('childFun', this.scoreData);此时这句如果input没有改变的时候,基本不执行,需要在 created中再去执行一遍
    但是当修改input中的值也是获取不到,还 不知道为啥
}
created() {
    this.initLineScore();
    this.$emit('childFun', this.scoreData);
},
***updated()
  {
      this.$emit('childFun', this.scoreData);
  }***
而且当在子组件中修改了scoreData的值也是渲染不出来,只是初始化的时候能获得到这个初始化的值

子页面中的代码
<selfAbility v-on:childFun="changeScore"></selfAbility>
<el-button type="primary" class="button-medium" @click="saveScore">保存</el-button>
saveScore(row) {
  console.log(this.a);
},
changeScore(data) {
  this.a = data;
}

因为子组件中的scoreData 会根据用户的数据改变,需要在父组件中去实时获取这个值,所以需要在子组件中更新这个值 用updated更新