vue 子组件和父组件同事需要修改 props中定义的值 会报错？

Question

子组件中 需要显示三个不同的信息

<div v-if="one">这是第一条数据<span>显示第二条数据</span></div>
<div v-if="two">这是第二条数据<span>显示第一条数据</span></div>
<div v-if="three">这是第三条数据<span>显示第一条数据</span></div>

子组件中定义

 props: {
    one: {
      type: Boolean,
      default: false
    },
    two:{
      type: Boolean,
      default: false
    },
    three:{
      type: Boolean,
      default: true
    }
  }

父组件中需要打开的时候选择显示那条数据 所以需要使用上面的操作 没有问题
但是子组件中点击后面的span 里的定义的点击事件 切换这三条数据后会报错 虽然不影响使用

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "one"
found in

那如果不可以单项 我可以定义一个函数传递么？

  typeshow{
      validator: function (value) {
        if(value==="yi"){
          this.oneshow();
        }
        else if(value==="er"){
          this.twoshow();
        }
      }
    }
   }

不知道这样能否行得通 在 父组件中如何使用？

Answer 1

# 2个方法

第一个 ：

// 父组件
<dialog-apply :visible.sync="dialogApplyVisible" />

// 子组件
<el-dialog
      :visible.sync="visible"
      title="申请"
      :before-close="onClose"
>

onClose() {
  this.$emit('update:visible', false)
}

第二个 ：

// 父组件
<dialog-apply :visible.sync="dialogApplyVisible" @close='dialogApplyVisible = false' />

// 子组件
<el-dialog
      :visible.sync="visible"
      title="申请"
      :before-close="onClose"
>

onClose() {
  this.$emit('close')
}

---

这2个方法 ， :before-close 是关键 ；

Answer 2

vue 中 遵循单向数据流原则，也就是说 不建议子组件去改变通过 props 从父组件中获取的数据。所以，你这里在子组件中改变 one,two,three 会报错。
官方文档 vue prop 单向数据流

Answer 3

this.oneshow(); 这里会出错 找不到 提示 undefined