vue サブコンポーネントはどのように親コンポーネントのメソッドを呼び出すのでしょうか?-Vue.js-php.cn

vue サブコンポーネントはどのように親コンポーネントのメソッドを呼び出すのでしょうか?

青灯夜游

リリース： 2021-10-26 12:03:28

オリジナル

124638 人が閲覧しました

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

vue サブコンポーネントはどのように親コンポーネントのメソッドを呼び出すのでしょうか?

このチュートリアルの動作環境: 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;测试&#39;);
      }
    }
  };
</script>

ログイン後にコピー

子コンポーネント

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

ログイン後にコピー

2番目のメソッド##を通じて、親コンポーネントのメソッドを呼び出します。 # は子にあります。コンポーネント内で $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;测试&#39;);
      }
    }
  };
</script>

ログイン後にコピー

サブコンポーネント

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

ログイン後にコピー

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

親コンポーネント

<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;测试&#39;);
      }
    }
  };
</script>

ログイン後にコピー

子コンポーネント

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

ログイン後にコピー

[関連する推奨事項:

vue.jsチュートリアル]

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