[Vuejs]-Vue.js, props and scoped slots

by

0👍

you can use props to pass data from a parent to a child if that it what your after
an example for verification
<html>
  <head>
    <title>props and components</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <div class="subText">
        <storage />
      </div>
    </div>
    <script>
      Vue.component('storage', {
        data() {
          return {
            message: 'hi from storage component',
            message2: 'hi from product component',
          }
        },
        template: `
        <div>
            {{ message }}
            <product :message2="message2" />
        </div>`,
      })

      Vue.component('product', {
        props: {
          message2: {
            type: String,
            required: true,
          },
        },
        template: `
       <div>
        {{ message2 }}
        </div>
       `,
      })

      var app = new Vue({
        el: '#app',
      })
    </script>
  </body>
</html>

0👍

This seems a basic parent-child prop passing thing. Don’t use v-slot for now. 

<FormField>
        <NumericInput 
            :fieldName="thisWillBePropToChild"
        ></NumericInput>
</FormField>

In FormField component, declare

data () {
    return { childFieldName: '' }
},
props: ['fieldName']

Modify your fieldName like 

this.childFieldName = this.fieldName

In NumericInput component, declare

props: ['childFieldName']

and access using, anywhere in the NumericInput component

this.childFieldName

Taken two different names, since you need to modify the prop and then send. Mutating prop directly is not recommended.

If you want to change any prop and make it reactive in your child component (as states in React), you will use data(can say state in React) properties.

Leave a comment