Вызов метода родительского компонента из дочернего компонента, написанного в Jsx Vue - PullRequest
0 голосов
/ 05 октября 2018

Я не ожидал, что это будет тяжело.

У меня есть дочерний компонент, написанный как

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-component как Input.js .Тем, кто знаком со стилизованными компонентами, не нужно объяснять этот код.

Затем я использую этот компонент InputWrapper в моем родительском компоненте Home.vue

<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 onродитель не уволен.

1 Ответ

0 голосов
/ 05 октября 2018

@change.native="handleChange" сделал свое дело для меня.Также я убрал все обработчики событий, слушающие ребенка.Так как мои свойства type и placeholder передавались как таковые, слушатели событий должны быть такими же.С этой мыслью модификатор .native работает лучше всего.Хотя все могло быть единообразно, просто @ change = "handleChange", который я пробовал ранее, и привело к попытке передать функцию в качестве подпорки для child.

IMP ПРИМЕЧАНИЕ. - Vuejs не обрабатывает @change как обычный onChange, @ input предпочтительнее, если идея состоит в том, чтобы фиксировать каждое нажатие клавиши.А вот и мнения!:)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...