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 !

tony19 · Accepted Answer · 2022-07-16 04:26:29Z

0

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>

edited Jul 16, 2022 at 4:26

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Dec 30, 2020 at 19:02

Erich

2,64622 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Osman Rafi Over a year ago

this method shows the following message in console. "[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated"

Meghdad Hadidi Over a year ago

It seems like you are mutating the prop in your child component. Try avoiding that. Otherwise, you have to use .sync modifier See this: vuejs.org/v2/guide/components-custom-events.html#sync-Modifier

Erich Over a year ago

props should be immutable - i.e. "read-only". if you need to update the value for some reason, either create a local copy of the prop data inside your child component, or $emit the updated value back to the parent for it to update the prop.

Collectives™ on Stack Overflow

How to use custom input component in vuejs?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related