vue子组件修改父组件的值

Question

括号里的是子组件，我点击按钮为true传到父组件需要改变他的状态，但是报错说：避免直接更改一个PROP，因为每当父组件重新呈现时，该值就会被覆盖。

子组件

export default{
  props: {
      onlyContent: {
        type: Boolean,
        default: false
      }
  },
  methods: {
      toggleContent (event) {
        if (!event._constructed) {
            return
        }
        this.onlyContent = !this.onlyContent
        this.$emit('contentToggle', this.onlyContent)
      }
  }
}

父组件

<v-ratingSelect v-on:contentToggle="contToggle" :only-content="onlyContent"></v-ratingSelect>

data () {
  return {
    onlyContent: false
  }
}

contToggle (event) {
  this.onlyContent = event
}

Answer 1

this.onlyContent = !this.onlyContent，错误，在子组件里面不能直接修改prop值；
如果要对某个prop 进行双向绑定，可以使用.sync 修饰符；看下文档就懂了；sync

Answer 2

在父组件中修改onlyContent

// 子组件
toggleContent (event) {
    ...
    this.$emit('contentToggle')
}

// 父组件
contToggle () {
  this.onlyContent = !this.onlyContent
}