如何更改父组件中另一个组件的道具

Question

我创建了一个小部件（如果您愿意，可以是子组件），它显示我已经推送到 NPM 以在另一个（如果您愿意的话是父组件）组件中使用的图像，这是一个全新的项目。鉴于我使用 NPM 的情况，如何从父组件更改此子组件的 props 值？我想将显示的图像数量从 5 更改为 10。

子组件显然在父组件中工作，我已经尝试更改我定义组件的下方的 prop 值。

父组件（“Widget”是子组件，是一个任意名称，在我尝试更改道具之前一直在工作）：

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

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

在 NPM 上发布的子组件：

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

我想将“perPage”“默认值”从 5 更改为 10，如上面的代码所示。提供的代码应该足以解决这个问题，但如果需要更多代码，我也可以提供。谢谢！

只想重申 NPM 的子组件在父组件（这是一个全新的项目）中处于正常工作状态，直到我尝试更改 prop 值。

Answer 1

我会通过小部件模板传递道具

你可以读到vue.js docs，如果你想通过模板最好的方式从父级到子级动态传递一些信息，所以在你的应用模板中你将通过小部件标签传递数据

<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>