How to pass data to single file components in Vue.js?

Question

I have a single file component header.vue:

<template>
  <h1>{{text}}</h1>
</template>

<script>
  export default {
    data() {
      return {
        text: 'Header text',
      };
    },
  };
</script>

I require it in my code as follows

const Header = require('components/header.vue');

And call it:

const header = new Vue({
  el: '#header',
  data: {
    text: 'New header text',
  },
  render: h => h(Header),
});

The component is rendered, but the text says Header text instead of New header text. Why?

I suppose you want to dynamically set header title by other components etc? Or what you want to achive ? — Marek Urbanowicz
– Marek Urbanowicz, Commented Nov 30, 2016 at 11:43
You're creating a new Vue component which renders the Header component as its child. The data from the parent component doesn't affect the data of the child in this way. You can Vue.extend() the Header component, then instantiate that with an overridden data property. — Decade Moon
– Decade Moon, Commented Nov 30, 2016 at 11:54
@DecadeMoon So you mean const Header = Vue.extend(require('components/header.vue')); and then new Header({ el: ..., data: { ... } });, right? This works, but it looks a little weird extending the import. Is this really necessary? — Mikko
– Mikko, Commented Nov 30, 2016 at 12:28

Decade Moon · Accepted Answer · 2018-02-16 02:26:34Z

You have two separate components here, the Header component and the anonymous component you created (with new Vue()). The anonymous component renders the Header component as its child. Both components have separate data properties; the parent has text = 'New header text' and the child has text = 'Header text'.

There are two ways (off the top of my head) that you can achieve this:

Extend the Header component and override its text data property with the new value:

const Header = require('components/header.vue');
const HeaderComp = Vue.extend(Header);

const header = new HeaderComp({
  el: '#header',
  data: {
    text: 'New header text',
  },
});

By making text a prop instead, you will be able to pass data down to the child from the parent:

header.vue

<script>
  export default {
    props: ['text'],
  };
</script>

usage

const Header = require('components/header.vue');

// Using render function

const header = new Vue({
  el: '#header',
  render: h => h(Header, {
    props: {
      text: 'New header text',
    },
  }),
});

// Using template

const header = new Vue({
  el: '#header',
  components: {
    Header,
  },
  template: '<header text="New header text"/>',
});

tony19 · Accepted Answer · 2022-07-16 02:59:12Z

1

I think there can be two ways to solve this:

you can pass the header as props

To pass props you have to make following changes in header.vue:

<script>
  export default {
    props: ['text'],
  };
</script>

And call it:

const header = new Vue({
  template: '<header :text="text" />',
  data: {
    text: 'New header text',
  }
});

You can have header as a vuex variable and use it in the header component.

edited Jul 16, 2022 at 2:59

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Nov 30, 2016 at 11:48

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

Collectives™ on Stack Overflow

How to pass data to single file components in Vue.js?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related