vue2 修改props

在Vue2中，父组件向子组件传递props是单向的，子组件不能直接修改props的值。但是可以通过使用.sync修饰符或者通过事件来修改props的值。

方式一：使用.sync修饰符
在父组件中，可以使用.sync修饰符来实现双向绑定，从而修改props的值。

<template>
  <el-button @click="dialogShowChange(true)">添加内容</el-button>
  <eduList ref="eduList" :dialogVisible.sync="dialogVisible" />
</template>

<script>
import eduList from "./eduList.vue"

export default {
  name: "eduList",
  data() {
    return {
      dialogVisible: false
    }
  },
  components: {
    eduList
 },
  methods: {
    dialogShowChange(val) {
      this.dialogVisible = val;    }
  }
}
</script>

<style lang="scss" scoped></style>

在子组件中，可以直接修改props的值，父组件中的dialogVisible也会随之改变。

方式二：通过事件修改props的值
在子组件中，可以通过触发事件来修改props的值，然后在父组件中监听该事件并更新props的值。

<template>
  <el-dialog class="associated-member" title="添加内容" :visible="visible" width="50%" @close="reset"></el-dialog>
</template>

<script>
export default {
  name: "eduList",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      visible: this.dialogVisible
    }
  },
  methods: {
    reset() {
      this.visible = false;
      this.$emit('update:dialogVisible', this.visible);
    }
  }
}
</script>

<style lang="scss" scoped></style>

在父组件中，监听子组件的update事件，并更新dialogVisible的值。