将代码从一个组件合并到一个 vue-app 中的另一个组件？

问题描述

编辑于 2021-01-16

各位程序员好！

我的 vue-wheater-app 有问题。我希望能够将 quotemachine 代码添加到我的 london.vue 代码中。但我不知道如何以一种好的方式做到这一点。 wheather-app 可以按照我自己的意愿运行。但我确实想在我的应用中添加一个随机的 qoute-machine。
以及如何将我的quotes.js 文件添加到我的代码中，以便它生成新的引号？

我的quote-app也可以自己工作。我只需要让天气应用程序和 qoute-machine 在同一页面上工作。我希望我的问题对你来说很清楚。否则只要问，我就会清除。

一如既往地感谢您的帮助！:)

这是我的wheater-app代码London.vue :

     <template>
          <div id="app">
            <main>
              <h1>London</h1>
        
              <div>{{ moment(date).format("YYYY-MM-DD") }}</div>
        
              <div>
                <div v-if="weatherInfo.length != 0"></div>
        
                <p>{{ weatherInfo.main.temp }} °C</p>
              </div>
    
              <div v-for="(weather,index) in weatherInfo.weather" v-bind:key="index">
                <img
                  v-bind:src="
                    'http://openweathermap.org/img/wn/' + weather.icon + '@2x.png'
                  "/>
              </div>

              <p> "{{ currentQuote }}" </p>
                <button @click="newQuote"> New Quote</button>
            </main>
          </div>
        </template>
        <script>


new Vue({
    el: '#app',data: {
        quotes,currentQuote: quotes[0]
    },methods: {
        newQuote: function () {
            const num = Math.floor(Math.random() * quotes.length)
            this.currentQuote = quotes[num]
        }
    }
}) 

        import axios from "axios";
        export default {
          name: "London",props: ["id"],data() {
            return {
              weatherInfo: [],};
          },mounted() {
            this.getWeather();
          },methods: {
            getWeather() {
              axios
                .get(
                  "https://api.openweathermap.org/data/2.5/weather?id=5695743&units=metric&appid=2acef1cd6cef64a2b6d2e405b5067512"
                )
                .then((res) => (this.weatherInfo = res.data));
            },},};
        </script>
        <style>
        </style>

这是我的 app.vue

 <template>
        <div id="app">
          <router-view> 
            </router-view>
            </div>
    </template>
    <script>
    </script>
    <style>
    </style>

这是我的 main.js

 import Vue from 'vue'
    import VueRouter from 'vue-router';
    import App from './App.vue'
    import moment from 'moment'
    import London from './components/London.vue'
    Vue.prototype.moment = moment
    Vue.use(VueRouter)
    const routes = [{
      path: '/London',name: 'London',component: London
    },{ 
    path: '/',component:London}]
    const router = new VueRouter({routes: routes})
    Vue.config.productionTip = false
    new Vue({
    
      router: router,render: h => h(App),}).$mount('#app')

这是我的quotes.js

var quotes = [
    "There's nothing wrong with having a tree as a friend.","The secret to doing anything is believing that you can do it. Anything that you believe you can do strong enough,you can do. Anything. As long as you believe.","Anytime you learn,you gain.","It’s life. It’s interesting. It’s fun."
    ];

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）