vuejs2中的未知误差

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道具中变异反图案看这里

Answer 2

使用计算属性(eg.isActive)传递给子组件

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>

我在父组件中添加了如下所示的methods

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