更改 vuejs2 中的道具值

Posted 2023-02-23

【中文标题】更改 vuejs2 中的道具值

【英文标题】：Change props value in 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 实现相同的行为。

【参考方案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 绑定来完成同样的操作