Vue: Child component not rendering string prop

Question

Vue: Child component not rendering string prop

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:

javascript vue.js vuejs2

Answer 1

Answer №1

Your problem lies in the StyledTitle.js file, where a regular styled <h1> component is being exported with a default slot for its content instead of your custom component that accepts a text prop.

If you prefer to use a prop-based component, you should export that one instead of the one from vue-styled-components. It's also recommended to avoid global component registration in this scenario.

Here is an example:

// StyledTitle.js
import styled from 'vue-styled-components'

// create a styled title locally
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: #ff4947;
  &:hover,
  &:focus {
    color: #f07079;
  }
`

// now export your custom wrapper component
export default {
  name: 'StyledTitle',
  props: ['text'],
  components: {
    Title, // locally register your styled Title as "Title"
  },
  template: `<Title>{{ text }}</Title>`,
})

Since your component doesn't have any state, it can be made purely functional. Using a render function will also be beneficial, especially if the Vue runtime doesn't include the template compiler by default (common in most Vue CLI apps)

export default {
  name: 'StyledTitle',
  functional: true,
  props: { text: String },
  render: (h, { props }) => h(Title, props.text)
}

Answer 2

Your problem lies in the StyledTitle.js file, where a regular styled <h1> component is being exported with a default slot for its content instead of your custom component that accepts a text prop.

If you prefer to use a prop-based component, you should export that one instead of the one from vue-styled-components. It's also recommended to avoid global component registration in this scenario.

Here is an example:

// StyledTitle.js
import styled from 'vue-styled-components'

// create a styled title locally
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: #ff4947;
  &:hover,
  &:focus {
    color: #f07079;
  }
`

// now export your custom wrapper component
export default {
  name: 'StyledTitle',
  props: ['text'],
  components: {
    Title, // locally register your styled Title as "Title"
  },
  template: `<Title>{{ text }}</Title>`,
})

Since your component doesn't have any state, it can be made purely functional. Using a render function will also be beneficial, especially if the Vue runtime doesn't include the template compiler by default (common in most Vue CLI apps)

export default {
  name: 'StyledTitle',
  functional: true,
  props: { text: String },
  render: (h, { props }) => h(Title, props.text)
}

Vue: Child component not rendering string prop

Answer №1

Similar questions

The slash character is escaped by the RegExp constructor, but the dot character is

Utilizing node-json2html, generate individual HTML tables for each record

Instructions on how to dynamically update a form field based on the input in another field using conditional statements

The JSHint error message that appeared was looking for an identifier but found the reserved word 'import' instead

What is the best way to share models across different node.js projects?

Transferring information to a controller using ajax in ASP.NET Core

What alternative methods can be used to render a React component without relying on the ReactDOM.render

Any ideas on how to extract binary data from PHP passthru using a JavaScript ajax request?

Ways to simulate a function that is a part of an internal object

Encountering an error when integrating my library with MUI

Encountering a TypeError when attempting to read the property 'name' of undefined while submitting a form in node.js

Is it possible to develop a function that can verify various input values and modify their appearance as needed?

Leveraging AngularJS services within an Angular service

Enhance your Vue.js application by dynamically adding a class when a computed value

Is there a way to dynamically update a game's highscore from a database without having to refresh the page?

Challenge encountered in posting a variable generated through ajax

Having trouble getting my ReactJS page to load properly

Using AJAX and PHP to dynamically fill HTML drop-down menus

problem with the clientHeight attribute in window event handlers

Is there a way for me to retrieve the variable from one function and use it in another