メソッド: 1. 子コンポーネントの「this.$parent.event」を通じて、親コンポーネントのメソッドを呼び出します。 2. 子コンポーネントは「$emit」を使用して親コンポーネントへのイベントをトリガーし、親コンポーネントはこのイベントをリッスンできます。 3. 親コンポーネントはメソッドを子コンポーネントに渡し、メソッドは子コンポーネントで直接呼び出すことができます。

このチュートリアルの動(dòng)作環(huán)境: Windows 7 システム、vue バージョン 2.9.6、DELL G3 コンピューター。

Vue では、サブコンポーネントが親コンポーネントを呼び出します。參考までに、ここに 3 つのメソッドを示します。

最初のメソッドは、 $parent.event

親コンポーネント

<template>
  <p>
    <child></child>
  </p>
</template>
<script>
  import child from &#39;~/components/dam/child&#39;;
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log(&#39;測(cè)試&#39;);
      }
    }
  };
</script>

子コンポーネント

<template>
  <p>
    <button @click="childMethod()">點(diǎn)擊</button>
  </p>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$parent.fatherMethod();
      }
    }
  };
</script>

2番目のメソッド##を通じて、親コンポーネントのメソッドを呼び出します。 # は子にあります。 コンポーネント內(nèi)で $emit を使用して親コンポーネントへのイベントをトリガーすると、親コンポーネントはこのイベントをリッスンできます。

<template>
  <p>
    <child @fatherMethod="fatherMethod"></child>
  </p>
</template>
<script>
  import child from &#39;~/components/dam/child&#39;;
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log(&#39;測(cè)試&#39;);
      }
    }
  };
</script>

<template>
  <p>
    <button @click="childMethod()">點(diǎn)擊</button>
  </p>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$emit(&#39;fatherMethod&#39;);
      }
    }
  };
</script>

3番目のタイプは、親コンポーネントがサブコンポーネント內(nèi)でメソッドをサブコンポーネントに渡すことです。このメソッドを直接呼び出します

<template>
  <p>
    <child :fatherMethod="fatherMethod"></child>
  </p>
</template>
<script>
  import child from &#39;~/components/dam/child&#39;;
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log(&#39;測(cè)試&#39;);
      }
    }
  };
</script>

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

vue.jsチュートリアル]

以上がvue サブコンポーネントはどのように親コンポーネントのメソッドを呼び出すのでしょうか?の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。