在子组件值更改vuejs上触发父方法

Question

我想在子组件值更改时触发父方法...

我在下面粘贴了代码

第一部分是父组件，第二部分是子组件....当我更改 ifsc 字段的值时，我想触发 getIfscCode() 方法。

问题：当事件发生时 getIfscCode() 方法未触发可能是因为我没有将任何道具传递给子元素，但你可以建议我如何去做。

父组件

<template>
  <div class="bg-gray-200 h-full">
    <header-view></header-view>
    <div class="px-32 py-6">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id nemo quam voluptates tenetur atque, similique odio quasi assumenda, quo porro deleniti eos nobis officia tempore, at harum odit. Illo, doloribus.</p>
    </div>
    <h2 class="text-2xl text-center about">Apply for Subsidy</h2>
    <div class="w-full h-full flex justify-center mt-16">
      <form class="w-full max-w-lg">
        <text-input id="name" placeholder="Enter Name" title="Name"></text-input>
        <text-input id="fathername" placeholder="Enter Father Name" title="Father Name"></text-input>
        <text-input id="phone" placeholder="Enter Active Mobile No" title="Mobile No"></text-input>
        <text-input id="aadhar" placeholder="Enter Aadhar No" title="Aadhar No"></text-input>
        <text-input id="accountno" placeholder="Enter Account No" title="Bank Account No"></text-input>
        <text-input
          id="ifsc"
          placeholder="Enter IFSC Code"
          title="Bank Branch IFSC Code"
          v-model="data.ifsc"
          @change="getIfscCode(data.ifsc)"
        ></text-input>
        <text-input id="accountname" placeholder="Enter Account Name" title="Bank Account Name"></text-input>
      </form>
    </div>
    <footer-view></footer-view>
  </div>
</template>

<script>
import HeaderView from "./header/Header";
import FooterView from "./footer/Footer";
import TextInput from "./form/TextInput";
export default {
  components: {
    HeaderView,
    FooterView,
    TextInput
  },
  data() {
    return {
      data: {
        name: "",
        ifsc: ""
      }
    };
  },
  created() {},
  methods: {
    getIfscCode(code) {
      axios
        .get(
          "https://mfapps.indiatimes.com/ET_Calculators/getBankDetailsByIfsc.htm?ifsccode=" +
            code +
            "&callback=objIFSC.getIfscData"
        )
        .then(res => {
          console.log(res.data);
        });
    }
  }
};
</script>

子组件

<template>
  <div class="flex flex-wrap mb-6">
    <div class="w-full px-3">
      <label
        class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
        :for="id"
      >{{title}}</label>
      <input
        class="appearance-none block w-full bg-gray-900 p-text-color border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500 placeholder-blue-300"
        :id="id"
        type="text"
        :placeholder="placeholder"
        :value="inputvalue"
        @input="$emit('update', $event.target.value)"
      />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String
    },
    id: {
      type: String
    },
    placeholder: {
      type: String
    },
    inputvalue: undefined
  },
  model: {
    prop: "inputvalue",
    event: "update"
  }
};
</script>

Answer 1

您发出 update 事件，但您捕获 change 事件。另外，因为您不发出 input 事件，所以父组件中的 v-model 将不起作用。 尝试像这样更正：

子组件

"$emit('input', $event.target.value)"

父组件

@input="getIfscCode($event)"