CODEWITHSUNDEEP
vuejs2
himekami
himekami

Reputation: 1459

How do I update a property in parent component from a child component

I have a parent component set up with data property(boolean) like this:

<script>
import PmhnEntryAll from './components/PmhnEntryAll'
import {store} from './store.js'


export default {
  name: 'PmhnApp',
  components: {
    PmhnEntryAll,
  },
  data: function () {
    return {
      vPmhnEntryAll: store.componentVisibility.vPmhnEntryAll,
    }
  },
}
</script>

and in child component I want to set the vPmhnEntryAll to 'true'. How do I go about this ?

Upvotes: 0

Views: 27

Answers (1)

Daniel
Daniel

Reputation: 35684

this is usually done using v-on: in parent and $emit in child

check out https://v2.vuejs.org/v2/guide/components-custom-events.html for docs around events emitting

you can also go further and v-bind which is a form of event listening, but it's limited in what applications you can use it for. https://v2.vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components

You can also pass a function to update a variable, but this is considered an anti-pattern and not recommended.

And depending on the structure of your project, you can uses busses or vuex for managing global scope.

Upvotes: 2

Related Questions