Question

我是vuejs2开发的新手。我正在进行modal开发。我将模态体代码保存在一个组件中，并在另一个组件中显示该模态。我在模态主体组件中有以下代码。

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

export default {        
    components: { SemanticModal: SemanticModal() },
    name: 'ModalBody',
    props: ['active1',],
    data() {
        return  {
            visible: false
        }
    },
    methods: {
        close() {
            this.$emit('sendValue', false);  //this is working
            this.visible = false
        },
        open () {
            this.visible = true
        },
    },
    watch: {
        active1 () {
            if (this.active1 && !this.visible) this.open()
            else if (!this.active1 && this.visible) this.close()
        },
    },
    directives: {
        'click-outside': {
            bind: function(el, binding, vNode) {
                el.onclick = function(e) {
                    var modal = document.getElementsByClassName("modal");
                    el.addEventListener('click', function (event) {
                        if (!modal[0].contains(event.target)) {                               
                       vNode.context.$emit('sendValue', false);  //this is not working
                       this.visible = false
                        } 
                    })            
               }
            }    
        }
    }
}

我在父组件中调用该模型（子）组件，如下所示

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

我需要将以下道具active1值从子组件更改为父组件。

Answer 1

您正在使用指令处理click事件。

根据您的要求，clickoutside指令应从sendValue发出child to parent个事件。但我觉得你的代码有一些复杂性。

完成您的方案的正确代码位于

          directives: {
                'clickoutside': {
                    bind: function(el, binding, vNode) {
                        el.onclick = function(e) {         
                            console.log("binding clicked");
                            vNode.context.$emit('sendValue', false);  
                        }
                    }    
                }
            }

如果您的目标是使用click event，则可以使用@click绑定来完成相同的

在vuejs2中更改道具值

1 个答案: