更改 vuejs2 中的道具值答案

【问题标题】：Change props value in vuejs2更改 vuejs2 中的道具值
【发布时间】：2018-07-08 21:15:12
【问题描述】：

我是 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>

我需要将下面的 props active1 值从子组件更改为 false 到父组件。

【问题讨论】：

你试过了吗。$emit("sendValue",false); ?
谢谢@divine。我试过了，但它不起作用。谢谢。
父级收到子级发出的值吗？
谢谢@divine。可能会收到。我正在使用这条线<modal-body :active1="active1" @sendValue="active1 = $event"></modal-body> 接收父级中的值。谢谢。
在查看了您的指令编码后，我觉得我们可以使用 @click 实现相同的行为。

标签： modal-dialog vuejs2 vue-component

【解决方案1】：

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

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

完成您的场景的正确代码如下

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

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

【讨论】：