vue2.0事件传递

Question

vue2.0中，我在template标签中加入：

<div @click="toggleContent($event)" class="switch" :class="{'on':onlyContent}">
  <span class="icon-check_circle"></span>
  <span class="text">只看有内容的评价</span>
</div>

然后在methods中添加方法：toggleContent

methods: {       
    toggleContent(event) {
      console.log(event._constructed);
      if (!event._constructed) {
        return;
      }
      this.onlyContent = !this.onlyContent;
 }
 
 打印console.log(event._constructed))，结果为undefined，并且报错：
     [Vue warn]: 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: "onlyContent" 
(found in component <ratingselect> at D:\git-slj\sell\src\components\ratingselect\ratingselect.vue)
 

为啥？

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

event对象没有_constructed这个属性的吧，还有你少了个大括号。

Answer 3

_constructed这个属性是干啥的呢，没有资料