首页 > 解决方案 > 带有 V-model 的 Vue 自定义组件

问题描述

我有一个使用自定义组件构建的表单,可供我们使用。注意:我无权访问自定义组件,添加 @input 解决方案对我不起作用。有什么方法可以在不更改组件的情况下从我的自定义组件中获得价值?

  <section class="container__content">
   <div>Details</div>
      <div class="personal-info">
        <textfield type="text" label="Name" placeholder="Shweta"></textfield>
         <textfield type="text" label="ID" placeholder="sm1234"></textfield>
       </div>

标签: vuejs2vue-component

解决方案


如果我正确理解你,你需要 $refs 对象。 https://vuejs.org/v2/guide/components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements 基本代码示例:

<template>
<child ref="childA"></child>
<child ref="otherCHild></child>
</template>

this.$refs.childA.something
this.$refs.otherCHild.something

这两个 $refs 变量将是包含在其各自子项中的 something 变量中的值。

我在 utils 库中使用它来密切关注我想要在父级中触发操作的更改(例如监视上传完成或错误)


推荐阅读