CODEWITHSUNDEEP
vue.jsvuejs2vue-component
Steve.NayLinAung
Steve.NayLinAung

Reputation: 5155

Vue.js - How to pass non-reactive data to child components

I know we can pass data to child components via Props. But it is reactive in one-way data flow mode. If the value of the data is changed in Parent component, it also has effect (update) on props in Child component.

In my case, I don't want to get update on specific prop in Child component even if that data in the Parent component is changed. It is because Child component will only responsible to show the data. But the data in the Parent Component still has to be reactive in Parent Scope.

I've read some forum article that suggest to use like Json. I feel it is a little dirty way and the data in my case is just one string.

Is there anyways to achieve that kind of solution?

Upvotes: 4

Views: 3260

Answers (3)

anthonygore
anthonygore

Reputation: 4967

You could copy the reactive prop in the created hook of the child component. The copy would not be reactive e.g.

export default {
  props: {
    reactive: Object
  },
  data: () => ({
    nonreactive: null
  }),
  created() {
    this.nonreactive = Object.assign({}, this.reactive)
  }
}

Note: the way you copy the reactive prop will depend on the data type, the way I've shown will work for objects.

Upvotes: 6

Neha
Neha

Reputation: 2261

Use prop as data property in child component. please see the fiddle link:

link here

Vue.component('greeting', {
  props: ['user'],
  data:function(){
    return {
      newuser:this.user
    }
  },
  template: '<h1>hi {{ newuser }}</h1>'
});

Upvotes: 2

Darma Kurniawan Harefa
Darma Kurniawan Harefa

Reputation: 85

Maybe u can check this one

VueJS render once into an element

use v-once on your child component

Upvotes: 2

Related Questions