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

Question

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

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

我的app文件:

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

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

我的代码App.vue- 这里是currentUser获取的地方.Navbar也会插入,我currentUser通过的地方props

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

现在收到currentUser组件./components/navbar.vue,如下所示:

<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,则需要在那里编辑模板并将数据向下传递到App第一个:

main.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 - 通过'render'attrs向下传递

渲染块允许在要渲染的组件上定义属性.

在你的情况下,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你将能够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>
...

并添加props在ResourceInfo.vue,就像这样:

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

...

你可以在这里阅读更多关于道具的信息 :-)