父子组件传值错误

父组件使用 addFriendVisible 传值给子组件的 props 属性

<template>
    <div>
      <add-friend @addFriendClose="addFriendClose" :addFriendVisible="addFriendVisible" />
    </div>
</template>
<script>
import addFriend from '@/components/AddFriend'
export default {
  name: 'AddressBook',
  components: {addFriend},
  data () {
    return {
      addFriendVisible: false
    }
  },
  methods: {
    addFriendClose () {
      this.addFriendVisible = false
    },
    handleCommand (command) {
      if (command === '0') {
        console.log('加入群聊≡ω≡')
        this.addGroupVisible = true
      } else if (command === '1') {
        console.log('添加好友︿(￣︶￣)︿')
        this.addFriendVisible = true
      } else if (command === '2') {
        console.log('发起群聊(￣▽￣)～■干杯□～(￣▽￣)')
        this.newGroupVisible = true
      } else {
        this.$message.error('错了哦，这是一条错误消息╮(╯▽╰)╭')
      }
    }
  }
}

子组件封装了 elementui 的 dialog 组件，且是嵌套的 dialog 组件，在子组件中我们拿到了父组件传来的 props : addFriendVisible,并直接用于组件的显示，在点击确定时我们会在子组件中发送给父组件消息 this.$emit('addFriendClose') 来让父组件关闭子组件

<template>
    <el-dialog title="添加好友" :visible.sync="addFriendVisible" width="36%">
    <el-dialog
        width="30%"
        title="申请添加好友"
        :visible.sync="innerFriendVisible"
        append-to-body>
        <el-input v-model="additionMessage" placeholder="添加验证消息"></el-input>
        <div class="validateForm">
            <el-button size="small" type="success" @click="addFriend()">确 定</el-button>
            <el-button size="small" @click="innerFriendVisible=false">取 消</el-button>
        </div>
    </el-dialog>
    </el-dialog>
</template>
<script>
export default {
  name: 'AddFriend',
  props: [ 'addFriendVisible' ],
  data () {
    return {
      innerFriendVisible: false,
      friendObj: {},
    }
  },
  methods: {
    // 设置添加好友消息
    setFriend (friendInfo) {
      this.friendObj = friendInfo
      this.innerFriendVisible = true
    },
    // 发送添加好友消息
    addFriend () {
      this.innerFriendVisible = false
      this.$emit('addFriendClose')
    }
  }
}
</script>

看起来还是合理的，但是报错

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: "addFriendVisible"

避免直接改变组件，因为每当父组件重新渲染时，该值将被覆盖。相反，使用基于组件值的数据或计算属性。组件改变：“addFriendVisible”

产生错误的原因

props 是父向子传值的一种形式。当我们子组件的 props 值要改变的时候，不能直接通过改变子组件的 props 来改变父组件。而现在就相当于是我们在反向改变 props，因为值已经被双向绑定了

修改后代码

父组件

<template>
    <div>
      <add-friend @addFriendClose="addFriendClose" @changeAddFriendVisible="changeAddFriendVisible" :addFriendVisible="addFriendVisible" />
    </div>
</template>
<script>
import addFriend from '@/components/AddFriend'
export default {
  name: 'AddressBook',
  components: {addFriend},
  data () {
    return {
      addFriendVisible: false
    }
  },
  methods: {
    changeAddFriendVisible (val) {
      this.addFriendVisible = val
    },
    addFriendClose () {
      this.addFriendVisible = false
    },
    handleCommand (command) {
      if (command === '0') {
        console.log('加入群聊≡ω≡')
        this.addGroupVisible = true
      } else if (command === '1') {
        console.log('添加好友︿(￣︶￣)︿')
        this.addFriendVisible = true
      } else if (command === '2') {
        console.log('发起群聊(￣▽￣)～■干杯□～(￣▽￣)')
        this.newGroupVisible = true
      } else {
        this.$message.error('错了哦，这是一条错误消息╮(╯▽╰)╭')
      }
    }
  }
}

子组件

• 我们将传进来的值与真正使用的值分开，使用 computed 属性来为其传值

<template>
    <el-dialog title="添加好友" :visible.sync="sonAddFriendVisible" width="36%">
    <el-dialog
        width="30%"
        title="申请添加好友"
        :visible.sync="innerFriendVisible"
        append-to-body>
        <el-input v-model="additionMessage" placeholder="添加验证消息"></el-input>
        <div class="validateForm">
            <el-button size="small" type="success" @click="addFriend()">确 定</el-button>
            <el-button size="small" @click="innerFriendVisible=false">取 消</el-button>
        </div>
    </el-dialog>
    </el-dialog>
</template>
<script>
export default {
  name: 'AddFriend',
  props: [ 'addFriendVisible' ],
  data () {
    return {
      innerFriendVisible: false,
      friendObj: {},
    }
  },
  computed: {
    sonAddFriendVisible: {
      get () {
        return this.addFriendVisible
      },
      set (val) {
        this.$emit('changeAddFriendVisible', val)
      }
    }
  },
  methods: {
    // 设置添加好友消息
    setFriend (friendInfo) {
      this.friendObj = friendInfo
      this.innerFriendVisible = true
    },
    // 发送添加好友消息
    addFriend () {
      this.innerFriendVisible = false
      this.$emit('addFriendClose')
    }
  }
}
</script>