1

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

上下文:我正在将 ThreeJS 实现转换为 Vue/Typescript。它包括一个控制面板,由滑块输入控制三个画布的参数组成。我将这个庞大的单体原始代码分成 3 个组件: - child1:controlsPanel,包含滑块和重置按钮 - child2:Vue-GL 画布,发出鼠标事件 - 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>

子代码:

<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:有没有办法在保持孩子和父母 App 之间的 2way-bindings 的同时简化?(2way-bindings 不适用于上述代码)

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

4

1 回答 1

0

当你使用 时props,你应该注意这种数据的一点:它的主要目的只是将数据从父母传递给孩子,就是这样。

正如您稍后可能会发现的那样,通常props在父母和孩子中都进行更改并不是一个好主意。为什么?考虑以下示例:

一个名为mainComponent传递currentID给其所有子组件的父组件:headerComponentfooterComponent. 但是,如果您已将您的设计设计props为由父母和孩子共同更改,那么如果footerComponent发生更改currentID,它也会发生变化,headerComponent这可能是意料之外的。将第三个子组件添加到您也使用的父组件中currentID怎么样?也会受到影响。

使用上面的例子,我的建议是:props只在单向绑定中使用。换句话说,mainComponent传递currentID给它的所有孩子。如果其中任何一个需要更改 that ,请通过在 the 中使用并赶上 this 来props发出一个事件,最后,change and that 将反映在所有孩子身上。但是现在,您确定您只在一个地方更新了这些数据 ( )。$emit("updateCurrentID", newCurrentID)mainComponentcurrentIDpropsmainComponent

要发出它,我可以想到两种可能性:$emit单独(文档)或通过创建您自己的自定义事件,如您在此处看到的 - MDN 的教程

希望能帮助到你

于 2019-05-18T20:15:53.913 回答