React native 将值从React本机选择器组件传递回VueJS调用方

我有下面的React Native picker组件可以工作-
文件名：dynamic-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>
    );
  }
}

import React，{Component}来自“React”；
从“本机基”导入{Container，Content，Picker}；
导出默认类DynamicPicker扩展组件{
建造师（道具）{
超级（道具）；
此.state={
已选择：this.props.selected
}
}
onValueChange（值）{
这是我的国家({
所选：值
});
}
itemsList=（）=>{
return（this.props.items.map）（（项目，索引）=>{
返回（）
}));
}
render（）{
返回(
{this.itemsList（）}
);
}
}

它由Vue JS文件调用，如下所示-
文件名：distance.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>

从“./dynamic picker”导入DynamicPicker；
导出默认值{
组成部分：{
动态切割器
},
数据（）{
返回{
选定“码”，
项目：[“码”、“英尺”、“米”]
}
}
}

---

选择器组件显示正确。当用户选择其他选项时，该更改将显示在选择器组件中。但是，当用户选择其他选项时，如何在distance.vue文件中更新

selected

属性一直困扰着我。需要捕获该值，以便将其传递给distance.vue文件的调用者并用于计算。

解决了该问题-为props添加了一个回调函数，以便在值更改时，子级可以调用该函数将数据传递回父级

以下是更新的distance.vue文件（父级）-

---

解决了这个问题-为props添加了一个回调函数，这样子函数可以在值更改时调用该函数将数据传递回父函数

以下是更新的distance.vue文件（父级）-

<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>

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