如何简化和重置 props 从 parent 到 child 组件？

Question

我正在尝试重置作为道具传递给 children 组件的数据。我应该怎么写这个？

上下文：我正在将 ThreeJS 实现转换为 Vue/Typescript。它包括一个由滑块输入组成的控制面板，控制三个 canvas 的参数。我将这个庞大的整体原始代码分成 3 个部分： - child1：controlsPanel，包含滑块和重置按钮 - child2: Vue-GL canvas, 发出鼠标事件 - parent: 托管初始数据并重置的组件。

parent :

<template>
  <div>
    <child1 :prop1="prop1" :prop2="prop2" :child1Prop="child1Prop" :reset="reset" />
    <child2 :prop1="prop1" :prop2="prop2" :child2Prop="child2Prop" />
  </div>
</template>

<script lang="ts">
  import { Component, Vue } from 'vue-property-decorator';

  import Child1 from './components/Child1.vue';
  import Child2 from './components/Child2.vue';

  const initialState = {
    prop1: 1,
    prop2: 2,
    child1Prop: 'some text',
    child2Prop: 'another text',
  }
  export type InitialState = typeof initialState;

  @Component({
    components: {
      Child1,
      Child2,
    },
  })
  export default class App extends Vue {
    public prop1!: InitialState['prop1'];
    public prop2!: InitialState['prop2'];
    public child1Prop!: InitialState['child1Prop'];
    public child2Prop!: InitialState['child2Prop'];

    public beforeMount() {
      Object.assign(this, initialState);
    }

    public reset() {
      Object.assign(this, initialState);
    }
  }
</script>

Child代码：

<template>
...
<!-- this button is only in Child1 -->
<button type="button" @click="resetCamera">Reset</button>
</template>

<script lang="ts">
  // import VueAsyncComputed, { IAsyncComputedProperty } from 'vue-async-computed';
  import { Component, Prop, Vue } from 'vue-property-decorator';
  import { InitialState } from '../App.vue';

  @Component
  export default class ChildX extends Vue {
    @Prop() public prop1!: InitialState['prop1'];
    @Prop() public prop2!: InitialState['prop2'];
    @Prop() public childXProp!: InitialState['childXProp']; // Specific prop

    // computed getters and methods using this.prop1 etc...

    // this method is only in Child1
    public resetCamera() {
      this.reset();
    }
  }
</script>

属性 prop1 和 prop2 由 Child1 组件控制并由 Child2 使用。 Child2 也可以更新这些道具（通过鼠标事件），这应该会适当地更新 Child1 中的滑块。

我设法让 Typescript 开心，但代价是到处打字...

问题 1：有没有办法在保持 childs 和 parent App 之间的双向绑定的同时进行简化？（2way 绑定不适用于上述代码）

问题2：如何重置所有道具？我的 child1.resetCamera 似乎调用了 parent reset() 但道具没有重置 ...

Answer 1

当你使用props时，你要注意这种数据的要点：它的主要目的只是将数据从parent传递到child，即它。

您稍后可能会发现，通常在 parent 和 child 中更改 props 并不是一个好主意。为什么？考虑以下示例：

一个名为 mainComponent 的 parent 组件将 currentID 传递给其所有 children：headerComponent 和 footerComponent。但是，如果您将 props 设计为由 parent 和 children 更改，如果 footerComponent 更改 currentID 它也会更改 headerComponent 这可能不是预期的。将第三个 child 组件添加到也使用 currentID 的 parent 组件怎么样？也会受影响

使用上面的例子，我的建议是：只在one-way绑定中使用props。换句话说，mainComponent 将 currentID 传递给其所有 children。如果其中任何一个需要更改 props，请使用 $emit("updateCurrentID", newCurrentID) 发出一个事件并在 mainComponent 中捕获它，最后更改 currentID，这将反映在全部children。但是现在，您确定只在一个地方 (mainComponent) 更新此 props 数据。

为了发射它，我可以想到两种可能性：通过 $emit 本身（docs) or by creating your own custom events, as you can see here - a tutorial by MDN.

希望对您有所帮助

如何简化和重置 props 从 parent 到 child 组件？

How to simplify and reset props from parent to child components?

typescript

vue.js

vuejs2

vue-class-components