javascript - 如何使用单个文件组件传递 Prop ？

Question

从 React 转向 Vue。大多数情况下有很多相似之处，但通过了 props似乎有点不同。我找不到太多关于如何使用单个文件组件执行此操作的文档。我在 main.js 中导入应用程序的所有数据.我想知道如何获取部分数据，例如 currentUser例如，到 ResourceInfo.vue ？再次假设这些都是单个文件组件。我需要通过 <App/> 传递下去吗？下的部分 main.js模板选项，然后进入<resource-info></resource-info>在App.vue然后以某种方式进入ResourceInfo.vue ？我也不想学习 Vuex，因为我才刚刚起步。谢谢!

主要.js

import Vue from 'vue'
import App from './App'
import ResourceInfo from '../src/components/ResourceInfo'
var db = firebase.database();
var auth = firebase.auth();

/* eslint-disable no-new */
var vm = new Vue({
  el: '#app',
  data: function() {
    return {
        users: {},
        currentUser: {},
        quizzes: {},
        resources: []
    }
  },
  template: '<App/>',
  components: { App, ResourceInfo },
})

App.vue

<template>
  <div id="app">
    <navbar></navbar>
    <resource-info></resource-info>
  </div>
</template>

<script>
import Navbar from './components/Navbar'
import ResourceInfo from './components/ResourceInfo'

export default {
  name: 'app',
  components: {
    Navbar,
    ResourceInfo
  }
}
</script>

<style>
</style>

资源信息.vue

<template>
</template>

<script>
var resourcesRef = firebase.database().ref('resources');

module.exports = {
  name: 'resource-info',
  data: function() {
    return {
      header: 'Before you build your quiz we just need some quick info.',
      resource: {
        type: '',
        title: '',
        url: '',
        desc: '',
        timesPassed: 0
      },
    }
  },
  firebase: {
    resources: resourcesRef
  },
  methods: {
    saveToFirebase: function() {
      resources.push({
        resource: this.resource
      })

      // Clear inputs  

      this.resource.title = '',
      this.resource.type = '',
      this.resource.desc = '',
      this.resource.url = ''

      console.log("Saving resource data...")

    }
  }
}
</script>

<style>
</style>

Answer 1

@丹姆。已经提供了答案，我希望你能按照他的指导修复你的 props。

我写这个答案是为了分享我在我的应用程序中处理 currentUser 的方法(仅适用于登录用户)。这是我的项目结构(针对此答案进行了高度简化):

模板:webpack，使用vue-cli使用vue init webpack my-project安装

我的应用文件:

• ./main.js:应用入口文件
• ./App.vue:负责页面布局，如页眉、页脚和使用 router-view
路由内容
• ./components/:导航栏、页脚等常用组件
• ./routes/:路由组件。我更喜欢把它放在这里，而不是弄乱我的组件文件夹。
• 还有更多...

我的 main.js 中的代码:只是定义路由和引导应用程序的标准代码。这里没有什么特别的。

我的 App.vue 中的代码 - 这是获取 currentUser 的地方。导航栏也被插入，我通过 props

传递 currentUser

<template>
    <div class="app-container">
        <app-navbar :currentUser="currentUserInfo"></app-navbar>
        <router-view></router-view>
        <app-footer></app-footer>
    </div>
</template>

<script>
import AppNavbar from "./components/app-navbar.vue"
import AppFooter from "./components/app-footer.vue"

export default {
    components: {
        "app-navbar": AppNavbar
    },
    data: function() {
        return {
            currentUserInfo: {
                loading: true
            } // start with an empty object and modify later
        }
    },
    // ... all other code ...
    created: function() {
        // Ensure that this is a logged-in user. Or else redirect to login page
        this.$http.get("/api/currentUser").then(response => {
            // process response
            this.currentUserInfo = response
            this.currentUserInfo.loading = false
        }, error => {
            // user not found. exit the Vue app and go to login page (directly from server)
            // Refer to my other answer: http://stackoverflow.com/a/40194152/654825

            // Or alternatively, you can serve your App's index.html only for logged-in users. Then you will never reach here.
        })
    },
    // ... more code ...
}
</script>

现在在你的组件 ./components/navbar.vue 中接收 currentUser 如下:

<template>
    <div class="navbar">
        <!-- some code - branding, etc.. -->
        <div>{{currentUser.loading ? "Loading..." : currentUser.name}}</div>
        <!-- some more code - logout link, etc.. -->
    </div>
</template>

<script>
export default {
    props: ["currentUser"],
    // and more ...
}
</script>

需要消化的东西太多了。我还广泛使用 vuex，我没有在上面的示例中显示，因为您不需要 vuex。

我希望它有助于构建您的应用程序。