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

【问题标题】：Calling parent component method from child component written in Jsx Vue从用 Jsx Vue 编写的子组件调用父组件方法
【发布时间】：2018-10-05 07:26:10
【问题描述】：

我没想到会很艰难。

我有一个像

这样写的子组件

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-styled-components 作为 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。

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

@change.native="handleChange" 帮了我大忙。我还清理了所有监听孩子的事件处理程序。由于我的type 和placeholder 属性是这样传递的，因此事件侦听器也应该如此。考虑到这一点，.native 修饰符现在效果最好。尽管我之前尝试过的 @change="handleChange" 可能会使事情变得统一，并导致尝试将函数作为道具传递给孩子。

IMP 注意 - Vuejs 不会将 @change 视为正常的 onChange。 @input 如果想法是捕获每个击键，则首选。意见来了！ :)

【讨论】：