Instance options - sana028/VueLearningsPoc GitHub Wiki

In Vue we have different options which are available to us on the Vue instance when using the Options API.

1.data 2.props 3.methods 4.watch 5.computed properties. 6.emits 7.expose.

data :

The data option is a function that returns an object with all the data properties inside.

The object returned by the data function can be accessed with this.$data, and a specific data property 'count' can be accessed with this.$data.count, or simply this.count.

ex: export default { data(){ return{ message:'hello' } } }

props :

using props we can define those props which are sending from parent to child component. ex:export default{ props:{ parentComponentMessage:String

    `}`
 `}`

methods :

methods options used to define custom methods for any submit functionality.

`ex: methods:{`
      `submitForm(){`
              `//write logic here`
     `}`

watch:

watchers are used to watch the reactive properties when a name is changed the watch property will render every time when there is any changes are happening on watch it is very useful when we are doing client side validation

ex: watch(value,(new value,old value)=>{ //we can perform validation for new value which is changing by user. })

computed:

computed properties are mostly used to derive a solution from two or more properties and in result it will create a new variable property. it is used cache functionality if the dependencies are changed at the time only the computed property will render.

ex: computed:{ isArrayLengthGraterThan(){ return this.result.length>2; } }

emits:

emits are used to pass a trigger a event or method to child component to listen those events and methods in child component based on need we will pass any data .

we don't need to mention emit in options api export defaut with out defining also we can do that
<child-comp v-on:custom-event="getNofication" />

in child component emits: ['custom-event'], methods: { notifyParent() { this.$emit('custom-event','Hello! ') } }

expose :

using expose we can provide properties which are need to available to parent. By default, all child component properties are available to a parent component through the use of template refs.

 This means that if the child component has no expose option, and the parent component uses the built-in attribute ref="childComp" on the child 
component, the parent component can access a data property 'message' in the child component with the code this.$refs.childComp.message. 

But, when using the expose option, only the properties listed in the expose option are available to the parent.

export default { expose:['createdMessage'], methods:{ createdMessage(){ //logic functionality } }