属性中的反应性在控件之间不起作用

Question

我一直在尝试使我的属性具有反应性，但由于某种原因，它不起作用。我的属性在两个 Vue 组件之间使用。我可以很好地访问组件，但它只是这个属性

在子组件中，我有一个下拉列表，我从中选择一个用户。我想把它传递给父组件

下拉菜单是一个自定义控件，因此无法粘贴其代码。但是一旦选择了用户，就会触发一个事件，我可以在调试器中看到即使选择了用户也成功触发了该事件。现在的问题是将值传递给父级。

子组件中的事件：

computed: {
  ...mapGetters(["selectedParentControl"]),
},
methods {
  onUserSelected(items){
    Vue.set( this.selectedParentControl, 'userObject', items )
  }
}

父模板：

<div v-if="userObject"> 
   <p class="mb-0">First User: {{this.userObject}}</p>
</div>

但是父组件中的变量没有更新。

Answer 1

因此，如果我说得对，您想为您的自定义组件设置双向数据绑定。所以你可以使用v-model。

在您的子组件中定义 prop 并发出值更改。

props: ['userObject'],
methods {
  onUserSelected(items){
    this.$emit('userObject', items);
  }
}

在您的父组件中，将v-model 指令添加到您的子组件元素中：

<div v-if="userObject"> 
   <child v-model="userObject"></child>
   <p class="mb-0">First User: {{this.userObject}}</p>
</div>