передать значение из компонента выбора React Native обратно в VueJS вызывающий

Question

У меня есть следующий работающий компонент выбора React Native -
имя файла: dynamici c -picker. js

import React, { Component } from "react";
import { Container, Content, Picker } from "native-base";

export default class DynamicPicker extends Component {
  constructor(props) {
    super(props);

    this.state = {
      selected: this.props.selected
    }
  }

  onValueChange(value) {
    this.setState({
      selected: value
    });
  }

  itemsList = () => {
    return (this.props.items.map( (item, index) => {
      return (<Picker.Item label={item} key={index} value={item} />)
    }));
  }

  render() {
    return (
      <Container>
        <Content>
            <Picker
              mode="dropdown"
              selectedValue={this.state.selected}
              onValueChange={this.onValueChange.bind(this)}
            >
              { this.itemsList() }
            </Picker>
        </Content>
      </Container>
    );
  }
}

Он вызывается Vue JS файл следующим образом -
имя файла: расстояние. vue

<template>
  <dynamic-picker :items="items" :selected="selected" ></dynamic-picker>
</template>

<script>
import DynamicPicker from './dynamic-picker';

export default {
  components: {
    DynamicPicker
  },
  data() {
    return {
      selected: 'yards',
      items: ["yards", "feet", "meters"]
    }
  }
}
</script>

Компонент средства выбора отображается правильно. Когда пользователь выбирает другую опцию, это изменение отображается в компоненте выбора. Тем не менее, я застрял на том, как получить свойство selected на расстоянии. vue файл для обновления, когда пользователь выбирает другую опцию. Это значение необходимо зафиксировать, чтобы его можно было передать вызывающему файлу расстояния. vue и использовать для расчета.

Answer 1

Разобрался - добавил обратный вызов для реквизита, чтобы потомок мог вызывать эту функцию для передачи данных обратно родителю при изменении значения.

Вот обновленное расстояние. vue file (parent ) -

<template>
  <dynamic-picker :items="items" :selected="selected" :onValueChange="onValueChange" ></dynamic-picker>
</template>

<script>
import DynamicPicker from './dynamic-picker';

export default {
  components: {
    DynamicPicker
  },
  data() {
    return {
      selected: 'yards',
      items: ["yards", "feet", "meters"]
    }
  },
  methods: {
    onValueChange(value) {
      this.selected = value;
    }
  }
}
</script>

Затем в динамике c -пикер. js (дочерний элемент) единственное необходимое изменение было здесь -

  onValueChange(value) {
    this.setState({
      selected: value
    });
    this.props.onValueChange(value);  // added this line
  }