Question

我是vuejs2的新手。我收到了以下错误。有谁能说为什么会出现这个错误？你能为此提供任何样品解决方案吗？

ModalBody.vue

<script>  
    import SemanticModal from 'vue-ya-semantic-modal'

    export default {        
        components: { SemanticModal: SemanticModal() },
        name: 'ModalBody',
        props: {
            active1: {
                required: true
            }
        },
    }
</script>

DataTable.vue

<script>
import ModalBody from './ModalBody'

export default {
    components: { ModalBody },
    data: function () {
        return  {
            active1: false
        }
    },
    props: {
        columns: {
            required: true
        },
        gdata: {
            required: true
        }
    },
    methods: {
        show () {
            this.active1 = true
        }
    },
}

Answer 1

在vue prop中，变异是反模式外观here

Answer 2

使用计算属性（例如，isisctive）传递给子组件

import ModalBody from './ModalBody'
export default {
    components: { ModalBody },
    data: function () {
        return  {
            active1: false
        }
    },
    props: {
        columns: {
            required: true
        },
        gdata: {
            required: true
        }
    },
    computed:{
       isActive (){
          return this.active1;
    },
    methods: {
        show () {
            this.active1 = true
        }
    },
}

并将此计算属性传递给模板中的子组件

<modal-body :active1='isActive'></modal-body>

这样做可以避免突变

Answer 3

最后我得到了解决方案。我将子组件添加到父组件，如下所示

<modal-body :active1="active1" @sendValue="active1 = $event"></modal-body>

我在Parent Component

中添加了methods，如下所示

methods: {
            close() {
                this.$emit('sendValue', false);
            }
        }

vuejs2中的未知错误

3 个答案: