從用Jsx Vue編寫的子組件中調用父組件方法

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>

問題 -未觸發onon上的onChange。

Answer 1

@change.native="handleChange"對我@change.native="handleChange" 。 我也清理了所有監聽孩子的事件處理程序。 由於我的type和placeholder屬性是按原樣傳遞的，因此事件偵聽器也應如此。 考慮到這一點， .native修飾符目前效果最好。 盡管通過我早些時候嘗試過的@ change =“ handleChange”可以使事情統一，但導致嘗試將功能作為道具傳遞給孩子。

重要說明-Vuejs不會將@change視為正常的onChange。 如果要捕獲每個擊鍵，則@input是首選。 意見來了！ :)