Question

我没想到会很难。

我有一个类似

的子组件

InputWrapper.vue

<script>
import StyledInput from "./input";

export default {
  name: "MyInput",
  props: {
    multiline: Boolean,
    onChange: Function
  },
  render(h) {
    const { multiline, onChange } = this;
    console.log(onChange);
    return (
      <div>
        <StyledInput multiline={multiline} onChange={e => onChange(e)} />
      </div>
    );
  }
};
</script>

然后，我将实际输入作为vue样式的组件输入为 Input.js 。对于那些熟悉样式化组件的人来说，无需解释该代码。

然后我在父组件Home.vue中使用此InputWrapper组件

<template>


<div class="pLR15 home">
      <Row>
          <MyInput :multiline="true" placeholder="Sample Input" type="text" :onChange="handleChange"></MyInput> 
      </Row>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import Row from "@/ui_components/row";
import MyInput from "@/ui_components/form/input/index.vue";

export default {
  name: "home",
  components: {
    HelloWorld,
    Row,
    MyInput
  },
  methods: {
    handleChange: function(e) {
      console.log("Hey you are changing my value to", e.target.value);
    }
  }
};
</script>

问题-未触发父级的onChange。

Answer 1

@change.native="handleChange"帮了我大忙。我也清理了所有监听孩子的事件处理程序。由于我的type和placeholder属性是这样传递的，因此事件侦听器也应如此。考虑到这一点， .native 修改器目前效果最好。虽然通过我早些时候尝试过的@ change =“ handleChange”本来可以使事情变得统一，但导致尝试将作为道具的功能传递给孩子。

IMP注意-Vuejs不会将@change视为正常的onChange。如果要捕获每个击键，最好使用 @input 。意见来了！：）

从用Jsx Vue编写的子组件中调用父组件方法

1 个答案: