时间戳

首页 > 解决方案 > 如何更改父组件中另一个组件的道具

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

问题描述

我创建了一个小部件（如果你愿意，可以是子组件），它显示我已经推送到 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 值。

标签： javascriptjqueryvue.jsvue-component

解决方案

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

如果您想通过模板以最佳方式从父级到子级动态传递一些信息，您可以阅读vue.js 文档，因此在您的应用程序模板中，您将通过小部件标签传递数据

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

推荐阅读