How to send data from parent to child component in Vue.js

Question

I am new to vue.js and currently I am building an app for learning purposes.

What I want to do:

I have a parent component which has a bunch of buttons with different id's.

The child component will wait for those id's to be sent by the parent and it will decide what to display based on the id. Thats all.

I wont post the full code because it's too large but I have tried a bunch of stuff like props and state but honestly it is so confusing.

I come from React background and I am still confused.

Parent component

<template>
  <button id="btn1">Show banana</button>
  <button id="btn2">Show orange</button>
</template>
<script>
  export default {
   name: 'Parent',
   data: function {
       //something
   },
   props: {
      // ?????
   }
  };
</script>

 **Child component**



    <template>
      <p v-html="something.text">
    </template>
    <script>
      export default {
       name: 'Child',
       data: function() {
         something: ''
         if(id from parent === id I want) {
             something = object.withpropIneed
          }
       },

      };
    </script>

Answer 1

Just for the sake of it, I think you were looking for this:

<template>
  <button id="btn1" @click = "id = 1">Show banana</button>
  <button id="btn2" @click = "id = 2">Show orange</button>
  <child-component :childid = "id"></child-component>
</template>
<script>
  import childComponent from 'childComponent'
  export default {
  name: 'Parent',
  data () {
      return {
        id: 0
      }
  },
  components: {
    childComponent
  }
  };
</script>

**Child component**



    <template>
      <p v-html="something.text">
    </template>
    <script>
      export default {
      name: 'Child',
      props: {
        childid: String 
      },
      data: function() {
        something: ''
        if(this.childid === whatever) {
            something = object.withpropIneed
          }
      },

      };
    </script>

Answer 2

You need to map the data from parent and pass it to child, thats it! In example i make passing a html string and binding that html received through 'fromParentHtml' prop mapped on child, so inside child component 'this.fromParentHtml' pass to exists because it is defined in props and every time you click in parent button executes the 'show' function and change the value from passed prop to child through parent 'html' data .. =)

<template>
    <div>
        Current html sent to child '{{html}}'
        <br>
        <button @click="show('banana')">Banana</button>
        <button @click="show('orange')">Orange</button>
        <button @click="show('apple')">Apple</button>

        <!-- Create child component -->
        <child-component :fromParentHtml="html"></child-component>

    </div>
</template>

<script>
    export default {

        name: "test3",
        components: {

            'child-component': {

                template: "<div>Child component... <br> <span v-html='fromParentHtml'></span> </div>",
                //Child component map a prop to receive the sent html from parent through the attribute :fromParentHtml ...
                props: {

                    fromParentHtml: {

                        required: true,
                        type: String
                    }
                }
            }
        },
        data(){

            return {

                html: ''
            }
        },
        methods: {

            show(fruit){

                this.html = '<span>The fruit is ' + fruit + ' !</span>';
            }
        }
    }
</script>

<style scoped>

</style>

If helped you please mark as correct answer! Hope it helps.

Edit 1: Assuming you have webpack to work with single file components, to import another component just do:

<template>

    <div>
        <my-child-component></my-child-component>
    </div>

</template>

<script>

    //Import some component from a .vue file
    import ChildComponent from "./ChildComponent.vue";

    export default {

        components: {

            //And pass it to your component components data, identified by 'my-child-component' in the template tag, just it.
            'my-child-component': ChildComponent
        },
        data(){


        },
        methods: {


        }
    }

</script>

Answer 3

Solved my problem by taking a different approach. I have implemented state and my component behaves exactly as I wanted to.

I found this link to be helpful for me and solved my problem. Thank you.