【vue】父子组件通信遇到的错误信息

 大意：

父组件控制子组件Dialog 对话框的显隐

错误demo:

父组件：

<template>
    <div class="app-container ">
        <my-sun-component :is-show="isShow"></my-sun-component>
        <el-button type="text"   @click.native="handleButton">点击打开Dialog</el-button>
    </div>
</template>
<script>
    import  mySunComponent from '@/views/skill/csun.vue';

    export default {
        components: {mySunComponent},
        data() {
            return {
                isShow: false,
            }
        },
        created(){
        },
        methods: {
            handleButton(){
                this.isShow = true;
            }
        },
    }
</script>

子组件

<template>
    <div class="app-container">
        <el-dialog
            title="提示"
            :visible.sync="isShow"
            width="30%">
            <span>这是一段信息</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="isShow = false">取 消</el-button>
                <el-button type="primary" @click="isShow = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>

    export default {
        name:'mySunComponent',
        data() {
            return {

            }
        },
        created(){
        },
        props:{
            isShow:{
                type: Boolean,
                default: function(){
                   return false
                }
            }
        },
        methods: {

        },
    }
</script>

页面效果：

 

 

 

错误截图：

错误文字版：

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

解决方案：

父组件：

<template>
    <div class="app-container ">
        <my-sun-component :is-show="isShow"></my-sun-component>
        <el-button type="text"   @click.native="handleButton">点击打开Dialog</el-button>
    </div>
</template>
<script>
    import  mySunComponent from '@/views/skill/csun.vue';

    export default {
        components: {mySunComponent},
        data() {
            return {
                isShow: 0,
            }
        },
        created(){
        },
        methods: {
            handleButton(){
                this.isShow = Math.random()*10 + 1;
            }
        },
    }
</script>

子组件

 <!--
    des:子组件
  -->
<template>
    <div class="app-container">
        <el-dialog
            title="提示"
            :visible.sync="isVisible"
            width="30%">
            <span>这是一段信息</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="isVisible = false">取 消</el-button>
                <el-button type="primary" @click="isVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>

    export default {
        name:'mySunComponent',
        data() {
            return {
                isVisible: false,
            }
        },
        created(){
        },
        watch: {
            isShow(val){
                this.isVisible = val ? true : false
            }
        },
        props:{
            isShow:{
                type: Number,
                default: function(){
                   return 0
                }
            }
        },
        methods: {

        },
    }
</script>

ps:

• 在父组件时这样写this.isShow = Math.random()*10 + 1;   是因为watch监控的值只有变化的时候才能监听到
• isVisible:this.isVisible 不可以这样写，因为会报如下错误（在demo中未报错，在项目使用中报错了，待解析） 

        错误文案：

     [Vue warn]: Invalid prop: type check failed for prop "visible". Expected Boolean, got Number with value 0.