javascript - Parent onChange 将子属性设置为 true

Question

表单(父)组件:

export default {
  template: `
    <form name="form" class="c form" v-on:change="onChange">
      <slot></slot>
    </form>`,
  methods: {
    onChange:function(){
      console.log("something changed");
    }
  }
};

和一个 c-tool-bar 组件(子组件)(如果存在)在 c-form 的槽中

export default {
  template: `
    <div class="c tool bar m006">
      <div v-if="changed">
         {{ changedHint }} 
      </div>
      <!-- some other irrelevant stuff -->  
    </div>`,
  props: {
    changed: {
      type: Boolean,
      default: false,
    },
    changedHint: String
  }
};

我想要实现的是，当 c-form 的 onChange 被触发时函数检查子 c-tool-bar 是否存在 && 它有一个 changedHint 文本声明(从后端)它应该将 c-tool-bar 的属性“changed”更改为 true 和 c- bar-tool 会自行更新，因此 v-if="changed" 实际上会显示 changedHint。我阅读了 vue.js 文档，但我真的不知道从哪里开始以及正确的方法是什么。

Answer 1

您可以像这样使用这两个组件:

<parent-component></parent-component>

您将在 :changed 属性中传递一个在 data() 的父组件中定义的变量。注意 :，我们使用 dynamic props ，因此一旦在父级中更改了 prop 值，它也会更新子级。要更改提示的显示，请更改作为 prop 传递给子组件的变量的值:

export default {
  template: `
    <form name="form" class="c form" v-on:change="onChange">
      <child-component :changed="shouldDisplayHint"></child-component>
    </form>`,
  data() {
    return {
      shouldDisplayHint: false,
    };
  },
  methods: {
    onChange:function(){
      this.shouldDisplayHint = true; // change the value accordingly
      console.log("something changed");
    }
  }
};