每个组件实例的唯一 ID

Posted 2023-02-23

【中文标题】每个组件实例的唯一 ID

【英文标题】：Unique id for each instance of component

【发布时间】：2018-11-07 11:57:59

【问题描述】：

我在一个页面上有两个相同的表单，我希望将其抽象为自己的组件。但是我需要为每个表单/组件设置不同的 id，因为有 jquery 可以获取 textarea 的值并且内容不同。这样做的正确方法是什么？我可以在创建组件的新实例时附加 id 吗？

Form.vue:

          <form
            @submit.stop.prevent="onFeedbackFormSubmit(activity)"
            id="new_feedback_form">
            <div>
              <div class="textarea-container">
                <textarea
                  placeholder="Leave some feedback"
                  @keyup="onFeedbackFormSubmit(activity)"
                  v-model="feedback"
                  name="entry[feedback]">
                </textarea>
              </div>
            </div>
          </form>

form.js：

  submitForm(activity) 
    let $form = $("#new_feedback_form");
    let data = $form.serialize();
    let path = `/portfolio/$activity.record.id`;

    // api patch request
    this.apiPatch( data: data, path: path )
      .then(( data , status, xhr) => 
        this.$store.commit("current/OVERWRITE_RECORD", 
          type: "activity",
          childAttr: "feedback",
          data: data.feedback
        );
      )
      .catch(e => 
        this.generateError(e);
      );
  ,

Main.vue：

<Form id="form1"></Form>
<Form id="form2"></Form>

这可能（或正确）吗？

【问题讨论】：

让我看看你使用这个id的jquery代码，也许你不需要id，你只需要一个dom元素

@jacky 我已经添加了上面的 jquery 代码。我想要做的是获取表单中的值以发出补丁请求。如果我在同一页面上有 2 个 Form 组件实例，它们会“冲突”吗？现在，如果我在 Main.vue 的组件上添加 id，我无法获取 textarea 中的值

【参考方案1】：

在Vue document

虽然明确定义的道具是传递信息的首选 对于子组件，组件库的作者不能总是 预见可能使用它们的组件的上下文。那是 为什么组件可以接受任意属性，这些属性被添加到 组件的根元素。

Form.vue 组件中不需要声明 id 属性

但是如果你想使用 id 作为属性并引用 is 为 this.id，你应该将 id 声明为 props

Form.vue

<form :id="id"> <!--  don't pass id here -->
</form>

<script>
export default 
  props: ['id'] // we need to declare id here

</script>

以及何时提交表单

submitForm(activity) 
  let $form = $("#" + this.id);

在Main.vue

<Form id="form1"></Form>
<Form id="form2"></Form>

【讨论】：

可以使用非prop属性在父级定义ID...但是OP仍然需要知道他们的jQuery选择器中的ID。

在组件中，你可以将id声明为props，然后你可以将其引用为this.id

我很高兴您能找到适合此 OP 要求的解决方案。您应该相应地修改您的答案，以便正确解决 OP 的目标。

【参考方案2】：

你可以使用 ref 属性：

<form ref="form">
...
</form>

jQuery 代码：

$(this.$refs.form).serialize();

但是，为什么不使用 v-model 来获取 Vue 中的值呢？

【讨论】：

这样就不用担心冲突了

是的，你是对的，我也可以使用 v-model，因为组件的每个实例不会有相同的表单值。