How to change props of another component in parent component

Question

I have created a widget (child component if you will) that displays images that I have pushed to NPM to use in another (parent component if you will) component, which is a completely new project. How can I change the props value of this child component from the parent component given my circumstances with using NPM? I would like to change the number of images displayed from 5 to 10.

The child component clearly works within the parent component and I have already tried to change the prop value underneath where I defined the component.

Parent component ("Widget" is the child component and is an arbitrary name and is working until I try to change the props):

<template>
  <Widget></Widget>
</template>

<script>
import Widget from "widget";
export default {
  name: "app",
  components: {
    Widget: {
      props: {
        perPage: {
          type: Number,
          default: 10
        }
      }
    }
  }
};
</script>

Child component that is published on NPM:

<script>
export default {
  name: 'Widget',
  props: {
    perPage: {
      type: Number,
      default: 5
    }
  }
}
</script>

I would like to change the "perPage" "default" from 5 to 10 as displayed in the code above. This code provided should be sufficient to solve this issue, but if more code is necessary, I can definitely provide that too. Thanks!

Just want to reiterate that the child component from NPM is in proper working form in the parent component (which is a completely new project) until I attempt to change the prop values.

Answer 1

I would pass the props through the widget template

as you can read into the vue.js docs if you want to pass some information dinamically from parent to child the best way by the template, so in your app template you will pass data through the widget tag

<template>
  <Widget :perPage ="perPage"></Widget>
</template>

<script>
import Widget from './Widget.vue'; //assuming they are in the same folder

export default {
  components: {
     Widget
  },
  data() {
     return {
        perPage: 5
     }
  }
}
</script>

//Widget.vue
<template>
  <p>Per Page: {{perPage}}</p>
</template>

<script>
export default {
    name: 'Widget',
    props: [
      'perPage'
    ]
 }
</script>