Question

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

子组件显然可以在父组件中工作，并且我已经尝试在定义该组件的下面更改prop值。

父组件（“小部件”是子组件，是任意名称，并且在我尝试更改道具之前一直有效）：

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

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

1 个答案: