Question

所以我用Vuejs Cli制作了一个天气应用程序给我预测未来4天的天气

我设置它的方式就是这个。

我有2个组件： A有一个输入填充，用户可以键入城市，这里是代码：

Html：

<form class="" @submit="onSubmit" @keydown.enter="onSubmit">
 <input class="input" v-model="city" name="city" placeholder="Type a city...">
 <button class="custom-button"><span></span></button>
</form>

JS：

export default {
  name: 'home',
  data () {
    return {
      city: ''
    }
  },
  methods: {
    onSubmit: function () {
    this.$router.push('results')
  }
 }
}

现在我想访问组件B上的城市并制作网址

<script>
 import axios from 'axios';
 const weather_url = "http://api.openweathermap.org/data/2.5/forecast?
   &appid=******&cnt=40&units=metric";

 export default {
  name: 'results',
  props: ['city'],
  data() {
    return { }
 },
 created() {    
  var requrl = `${weather_url}&q= CITY THE USER TYPED`;

现在，当结果页面加载时，我可以看到url chages：

?city=whatEverITyped/results

但我似乎无法弄清楚如何让用户输入该城市。

任何人都能指出我正确的方向吗？提前谢谢！

Answer 1

由于您的组件是simbings，您有3个选项：

拥有一个父组件，您可以在两个子组件之间放置公共数据;
你有另一个Vue实例来获取组件之间的所有数据（这是＃3的更简单形式）;
使用Vuex作为商店管理框架。

1。父组件

您可以让父组件侦听子更改事件（使A chanegs成为父数据）并通过props传递给B（使B更改为该父数据）;

2。将Vue实例作为总线

这里解释https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication

3。使用Vuex

Vuex是Facebook Flux的实现（看起来很像）。

您可以为绑定到该状态的商店和组件设置操作和突变，以对该更改做出反应。

您可以在此处查看更多内容https://vuex.vuejs.org/en/

Vuejs cli将数据从A组件传递给B

1 个答案:

1。父组件

2。将Vue实例作为总线

3。使用Vuex