staxwell staxwell - 1 month ago 28
Javascript Question

How Do I Pass Props Using Single File Components?

Coming to Vue from React. For the most part there are a lot of similarities but passing

props
seems a little different. I couldn't find much documentation on how to do this using single file components. I import all my data for the app in
main.js
. I'm wondering how I can get parts of my data like
currentUser
for example, to
ResourceInfo.vue
? Again assuming these are all single file components. Do I need to pass it down through the
<App/>
part under
main.js
template option, then into
<resource-info></resource-info>
in
App.vue
then somehow into
ResourceInfo.vue
? I'd like to stay away from having to learn Vuex as well because I'm just starting out. Thanks!

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

Welcome to Vue :-)

You pass pops by adding :prop="propVal" on a given component. So to pass currentUser you need to do the following:

App.vue:

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

And add props in ResourceInfo.vue, like so:

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

...

You can read more about props here :-)


Edit

If you want to pass props down from main.js, you need to edit the template there and pass the data down to App first:

main.js

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

...and in App.vue

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

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

Then, currentUser can be further passed on to resource-info.