VUE 子组件向父组件传递参数

在VUE中，是不支持子组件往父组件直接传递参数的，一般子组件需要通过向父组件添加事件方法来实现参数传递

MissionList 是父组件    MissionListOverviewPanel是子组件

先展示子组件代码

watch: {
    watchedChecked(value) {
      this.$emit('checked', value);
    },
  },
  data() {
    return {
      show: false,
      radio: 1,
      dialogMessage: '',
      watchedChecked: false,
      nomalMissionCount: 0,
    };
  },

 在这里我用watch去监视绑定的参数【watchedChecked】变化，通过this.$emit('checked', value);的方式给父组件绑定方法。

这一段代码的意思就是只要watchedChecked这个参数的数据一有变化 就会向父组件去绑定方法。其中value就是参数变化后的值

接下来是父组件代码

        <missionList-overview-panel
          corner-text="正在进行"
          :title=row.entity.NAME
          :style="panelStyle(row.index)"
          @checked="checkedSwitch"
        />

在引用子组件的标签的属性里写上@checked这里的名字一定和子组件绑定方法【 this.$emit('checked', value);】时一致

methods: {
    checkedSwitch(value) {
      console.log(value);
    },
},

然后在methods下写上对应的方法  value就是子组件传过来的数据了

PS：简便写法

子组件：

this.$emit('update:checked', value);

父组件：

:checked.sync="checkedArray[row.index]"