如何使用单个文件组件传递道具？

Question

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

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

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

@DanM。已经给出了答案，希望你能按照他的指导修复你的props。

我正在写这个答案，以便我可以在我的应用程序中分享我处理currentUser 的方法（仅适用于登录用户）。这是我的项目结构（此答案高度简化）：

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

我的应用文件：

• ./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，所以我没有在上面的示例中显示。

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

Answer 2

有几种方法可以实现这一目标。

方法 #1 - 使用“模板”

如果你想从main.js向下传递props，你需要在那里编辑模板并将数据先向下传递给App：

ma​​in.js

new Vue({
  ...
  template: '<App :current-user="currentUser"/>'
  ...
})

...在 App.vue

中

<template>
  <div id="app">
    <navbar></navbar>
    <resource-info :current-user="currentUser"></resource-info>
  </div>
</template>

<script>
module.exports = {
  ...
  props: ['current-user']
  ...
}
</script>
...

然后，currentUser 将在ResourceInfo.vue 中可用（记得添加props: ['current-user']）。

方法 #2 - 通过“渲染”属性向下传递

渲染块允许在您正在渲染的组件上定义属性。

在您的情况下，currentUser 可以像这样传递：

var vm = new Vue({ 
    el: '#app', 
    data: function() { 
        return { 
            users: {}, 
            currentUser: {}, 
            quizzes: {}, 
            resources: [] 
        }
    }, 
    render (h) { 
        return ( 
            '<App />', 
            { attrs: { currentUser } } 
        ) 
    }, 
    components: { App, ResourceInfo } 
})

那么在App.vue你就可以通过props访问currentUser：

import Navbar from './components/Navbar'
import ResourceInfo from './components/ResourceInfo'

export default {
  name: 'app',
  props: ['current-user']
  components: {
    Navbar,
    ResourceInfo
  }
}

现在您可以像往常一样将其进一步向下传递给ResourceInfo.vue（见下文）。

---

一般的传递道具

App.vue：

<template>
  <div id="app">
    <navbar></navbar>
    <resource-info :current-user="currentUser"></resource-info>
  </div>
</template>
...

并在 ResourceInfo.vue 中添加props，如下所示：

<template>
  <pre>{{currentUser}} <!-- dumb example --></pre>
</template>

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

module.exports = {
  name: 'resource-info',
  props: ['current-user'], // You can also do prop validation here
    ...
  }
}
</script>

...

你可以阅读更多关于道具here :-)

---