How to use custom input component in vuejs?

Question

While using Bootstrap-Vue as UI framework, I am trying to make a custom form component and use it in several parent components. Here is my form component

<template>
  <b-form>
    <b-input-group>
      <b-form-input placeholder="Post Title"></b-form-input>
      <wysiwyg-input placeholder="Post Content" />
    </b-input-group>
  </b-form>
</template>

and the parent component is

<FormFields :title="title" :content="content" />

How can i access the value in parent component from child component.

Note: I am using vue-quill editor as well.

Here is the codesandbox link: https://codesandbox.io/s/mystifying-benz-w8wgu?file=/src/App.vue

Thanks in advance !

Erich Erich · Accepted Answer · 2020-12-30T19:02:44

Define a prop on your child component and pass the data to it when you use it in the parent:

// ChildComponent.vue
export default {
  props: {
    someData: {}
  }
}

// ParentComponent.vue
<template>
  <child-component :some-data="myData"></child-component>
</template>

<script>
export default {
  data() {
    return {
      myData: {...}
    }
  }
}
</script>

How to use custom input component in vuejs?

1 Answers