代码之家 › 专栏 › 技术社区 › SamohtVII

在Vue JS外部组件中更改道具

vue.js

1

SamohtVII · 技术社区 · 6 年前

这是我的第一个Vue应用程序,所以请轻松使用代码:P

我在一边有一个用户列表,在另一边有一个组件来编辑这些用户详细信息。选择用户时,您可以看到他们的详细信息,然后单击“编辑详细信息”。我想隐藏编辑详细信息,并在选择新用户时显示用户详细信息。在组件内部,我有一个ShowEdit变量,该变量为true或false,将显示或隐藏编辑区域。当一个新用户被选中来隐藏打开的编辑时,我从父级向这个组件发送一个道具。我觉得我很接近,因为它是目前工作的完美,但我想摆脱的错误

每当父组件重新渲染时….”

以下是重要的几点:

家

<transition name="component-fade" mode="out-in">
     <sidebar-client-content :theClient="selectedUser" :showEditHP="showEditHP"></sidebar-client-content>
</transition>

activate: function(el) {
    this.showEditHP = true // Hide edit if new user selected
},

组成部分

<div id="sidebar-client-content">
<div class="staff_header">
    <a v-if="showEdit" v-on:click="showEdit = !showEdit"><i class="fal fa-edit"></i>Edit</a>
    <a v-if="!showEdit" v-on:click="showEdit = !showEdit"><i class="far fa-times"></i>Close</a>
</div>
<transition-group name="fadeHeight" mode="out-in">
    <div class="client_information" v-if="showEdit">
           <!-- The Client Details -->
    </div>
    <div class="client_information" v-if="!showEdit">
        <!-- Client Edit Form -->
    </div>
</transition-group>
</div>



export default {
props: [
    'showEditHP', // Close edit if new user selected
],
computed: {

    showEdit: {
        get: function() {
            return this.showEditHP
        },
        set: function (newValue) {
            this.showEditHP = newValue
        }
    }

},

我明白 this.showEditHP = newValue

谢谢。

2 回复 | 直到 6 年前

1

MomasVII 6 年前

如阮云所说你可以用 $emit 将值发送回父级以保持值同步。您只能使用emit更改父数据,否则在子数据继续进行更改时,它将保持为true或false。使这些值与emit保持同步,然后使用watch检查父级是否进行了更改。

<transition name="component-fade" mode="out-in">
     <sidebar-client-content @clicked="onClickChild" :theClient="selectedUser" :showEditHP="showEditHP"></sidebar-client-content>
</transition>

onClickChild (value) {
    // I am the child value inside the parent!
},

<div class="staff_header">
     <a v-if="showEdit" v-on:click="showEdit = !showEdit; $emit('clicked', showEdit)"><i class="fal fa-edit"></i>Edit</a>
     <a v-if="!showEdit" v-on:click="showEdit = !showEdit; $emit('clicked', showEdit)"><i class="far fa-times"></i>Close</a></i>Close</a>
</div>

2

0

You Nguyen 6 年前

警告真的很清楚

在子组件中,您试图改变 showEditHP :

set: function (newValue) {
    this.showEditHP = newValue
}

然而,这种变异是不鼓励的。相反,我们应该 emit 子组件中的事件,然后让父组件侦听该事件并改变属性本身。

属于父组件,那么父组件应该是它的变体。