子コンポーネントが親コンポーネントに値を渡す

1つ目の方法は、サブコンポーネント内でthis.$を直接通過します.parent.eventが親コンポーネントを呼び出す方法
親コンポーネント

<template>
  <div>
    <child></child>
  </div>
</template>
<script>
  import child from './components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log(' ');
      }
    }
  };
</script>

サブアセンブリ

<template>
  <div>
    <button @click="childMethod()"> </button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$parent.fatherMethod();
      }
    }
  };
</script>

第2の方法は、サブコンポーネントで$emitで親コンポーネントにイベントをトリガーし、親コンポーネントがこのイベントを傍受すればよい.
親コンポーネント

<template>
  <div>
    <child @fatherMethod="fatherMethod"></child>
  </div>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log(' ');
      }
    }
  };
</script>

サブアセンブリ

<template>
  <div>
    <button @click="childMethod()"> </button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$emit('fatherMethod');
      }
    }
  };
</script>

3つ目のメソッド親コンポーネントはメソッドをサブコンポーネントに転送し、サブコンポーネントで直接このメソッドを呼び出します.
親コンポーネント

<template>
  <div>
    <child :fatherMethod="fatherMethod"></child>
  </div>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log(' ');
      }
    }
  };
</script>

サブアセンブリ

<template>
  <div>
    <button @click="childMethod()"> </button>
  </div>
</template>
<script>
  export default {
    props: {
      fatherMethod: {
        type: Function,
        default: null
      }
    },
    methods: {
      childMethod() {
        if (this.fatherMethod) {
          this.fatherMethod();
        }
      }
    }
  };
</script>

サブアセンブリの簡単な書き方

<template>
  <div>
    <button @click="fatherMethod()"> </button>
  </div>
</template>
<script>
  export default {
    props: {
      fatherMethod: {
        type: Function,
        default: null
      }
    },
    methods: {
      
    }
  };

————————————————著作権声明:本文はCSDNブロガーの「QQ帝国」のオリジナル文章で、CC 4.0 BY-SA著作権協定に従い、原文の出典リンクと本声明を転載してください.テキストリンク:https://blog.csdn.net/QQ_Empire/article/details/89221545