Hey there, I'm currently exploring the ins and outs of Vue and diving into its one-way data bind model, component registration, and passing props.
Within my index.js file, I've set up my parent component to render a single child component for now:
import Vue from 'vue'
import StyledTitle from './components/StyledTitle'
new Vue({
el: '#app',
components: {
StyledTitle,
},
})
The child component in question is called StyledTitle.js:
import Vue from 'vue'
import styled from 'vue-styled-components'
const StyledTitle = styled.h1`
font-size: 1.5em;
text-align: center;
color: #ff4947;
&:hover,
&:focus {
color: #f07079;
}
`
Vue.component('styled-title', {
props: ['text'],
components: {
'styled-title': StyledTitle,
},
template: `<StyledTitle>{{ text }}</StyledTitle>`,
})
export default StyledTitle
Now, when I look at my HTML code, I expect it to render a red "Hi":
<div id="app">
<styled-title text="Hi"></styled-title>
</div>
Unfortunately, the "Hi" is not showing up as expected, and I'm finding that the props value is coming up as undefined. Transitioning from React, I'm curious as to why this setup isn't working. Any help would be appreciated! Thanks!
P.S. Here's a screenshot of my Vue devtools: https://i.sstatic.net/trWNU.png