如何从子组件Vue 2获取v模型数据？

dsekswqp 于 2023-02-13 发布在 Vue.js

关注(0)|答案(3)|浏览(201)

我做了一个自定义的输入组件，并希望在父组件中从它获取数据。最初我使用的组件是指南中所写的：
Input.vue

<input
      :value="value"
      @input="$emit('input', $event.target.value)"
      class="w-full border-[1px] bg-transparent p-4 lg:text-sm placeholder:text-[#97999B]"
      :placeholder="placeholder"
      :class="statusStyles"
    />

MyComponent.vue

<Input
          placeholder="Phone number"
          type="text"
          v-model="phone"
        />

一切正常，但我把这个代码分解成组件，出现了另一个 Package 器，看起来像这样：
Form.vue

<OrderFormInfo
      v-if="step === 'info'"
      :name="name"
      :apart="apart"
      :city="city"
      :phone="phone"
      :postal="postal"
      :region="region"
      :address="address"
      @next-step="handleNext"
    />

OrderInfo.vue

<Input
          placeholder="phone number"
          type="text"
          v-model="phone"
        />
        <Input
          placeholder="recipient name"
          type="text"  
          v-model="name"
        />

Input.vue

<template>
  <div class="w-full space-y-[10px]">
    <input
      :value="value"
      @input="$emit('input', $event.target.value)"
      class="w-full border-[1px] bg-transparent p-4 lg:text-sm placeholder:text-[#97999B]"
      :placeholder="placeholder"
      :class="statusStyles"
    />
    <p v-if="errorStatus" class="text-red-500">{{ errors[0] }}</p>
  </div>
</template>

<script>
export default {
  props: {
    errors: Array,
    sucess: Boolean,
    value: String,
    errorStatus: Boolean,
    placeholder: String,
  },
  computed: {
    statusStyles() {
      if (this.errorStatus) {
        return "border-red-500 text-red-500";
      }
      if (!this.errorStatus && this.value.length > 3) {
        return "bg-white border-black text-black";
      }
      return "text-black  border-[#97999B]";
    },
  },
};
</script>

如何在Form.vue中获取OrderInfo.vue中的数据？我尝试过通过props传递数据，但vue给出了一个错误，表示您无法执行此操作。我不明白如何将v-model与嵌套组件一起使用

vue.js

来源：https://stackoverflow.com/questions/75409755/how-do-i-get-v-model-data-from-a-child-component-vue-2

3条答案

按热度按时间

qvsjd97n1#

您可以通过在mounted钩子内使用父组件（Form.vue）中的watcher函数来监视 prop 。
您只需将ref附加到最顶层的子组件。例如**：**

<order-form-info :name="name" :phone="phone" ref="orderFormComponent"></order-form-info>

现场演示**：**
x一个一个一个一个x一个一个二个x

赞(0）回复(0）举报 2023-02-13

wtzytmuj2#

我是这样解决的，我在网上找到一篇文章，改动如下：
OrderFormInfo.vue

<Input
          placeholder="Phone number"
          type="text"
          :error-status="false"
          :errors="[]"
          :value="phone"
          @input="$emit('input-phone', $event)"
     />

OrderForm.vue

<OrderFormInfo.
      v-if="step === 'info'"
      :name="name"
      @input-name="name = $event"
      :phone="phone"
      @input-phone="phone = $event"
      @next-step="handleNext"
  />

赞(0）回复(0）举报 2023-02-13

zujrkrfu3#

有几种方法可以做到。比如-
1.使用Event Bus（在数据更新时发出事件。）
1.使用Vuex（在状态中更新并在任何位置访问）
以上两种解决方案需要一些安装，最简单的方法是使用this.$root.$emit向任何组件发出事件，而不使用任何全局变量、总线或属性。
下面是一个工作演示，尝试在输入字段（OrderFormInfo.vue）中更改phone和name值，您应该会看到Form.vue（父组件）中的更改。

Vue.component('orderFormInfo', {
  props: ['prop_name', 'prop_phone'],
  data() {
    return {
      name: this.prop_name,
      phone: this.prop_phone,
    }
  },
  watch: {
    name(newVal, oldVal) {
      this.$root.$emit('onNameUpdate', newVal);
    },
    phone(newVal, oldVal) {
      this.$root.$emit('onPhoneUpdate', newVal);
    }
  },
  template: `<div>
    <b>OrderFormInfo.vue</b><br>
    <input-field
      placeholder="phone number"
      type="text"
      v-model="phone"/>
    <input-field
      placeholder="recipient name"
      type="text"
      v-model="name"/>
  </div>`
});

Vue.component('inputField', {
  props: ['value', 'placeholder'],
  template: `<input
:value="value"
@input="$emit('input', $event.target.value)"
:placeholder="placeholder"
/>`
});

var app = new Vue({
  el: '#app',
  data() {
    return {
      name: 'My Name',
      phone: '9090909090'
    }
  },
  created() { 
    this.$root.$on('onNameUpdate', (name) => {
      this.name = name;
    });
    this.$root.$on('onPhoneUpdate', (phone) => {
      this.phone = phone;
    })
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <b>Form.vue</b><br>
  Name - {{ name }} <br>
  Phone - {{ phone }} <br><br>
  <order-form-info :prop_name="name" :prop_phone="phone"></order-form-info>
  
</div>

- 重要-**

当你把props从Form.vue传递到OrderFormInfo.vue时，不要试图直接改变props，首先，把props复制到data变量并改变它们，阅读原因here。

赞(0）回复(0）举报 2023-02-13

我来回答

如何从子组件Vue 2获取v模型数据？

3条答案

相关问题

热门标签

最新问答