Vue 父与子组件传值

父 => 子

　　父组件中：

<SiteEdit @EditStatus='CreateOrEditSite' @SetDialogFunc='SetDialogFormVisible' v-bind:dialogFormVisible="dialogFormVisible"></SiteEdit>

　　

v-bind:dialogFormVisible="dialogFormVisible"这个属性绑定的就是要向子组件传输的值。
子组件中：

props:{
        dialogFormVisible:Boolean
    }, 

设置一个属性，用来接收父组件传递过来的值，完成传输。

子 => 父

　　

@SetDialogFunc='SetDialogFormVisible' 这个属性的属性名称就是子组件中的调用名称，例如：

this.$emit('SetDialogFunc',json);

上面例子就是调用父组件的这个方法，注意属性值 ’SetDialogFormVisible‘ 这个才是父组件真正执行的方法。

所以在父组件的方法需要加入如下方法：

SetDialogFormVisible(val) {
      this.dialogFormVisible=false;
    }

这样在子组件中使用$emit时就会自动执行父组件这个方法了。

有个情况要注意：我们经常会将父组件中的值传递给子组件，然后子组件又会修改这个值。这样在Vue中是会报错的

[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: "dialogFormVisible"

　　我在子属性中直接修改了dialogFormVisible这个属性值，所以报错了。在vue2.0中是不能直接修改prop中的值的。解决这个问题的思路就是我们在子组件中再写一个调用父组件的方法，在父组件中修改这个传输的属性值。就是和子组件调用父组件的过程是一样的。

　上面这个父组件中的方法SetDialogFormVisible,我就是为了修改这个属性值才添加的。