コンポーネントは値を渡します（子ページのクリックイベントは親ページのパラメータを変更し、直接トリガーされます）

子ページのクリック イベントで親ページのメソッドを直接トリガーするには、カスタム イベントを通じてパラメーターを渡す代わりに、  $parent Vue.js のプロパティを使用して親コンポーネントのメソッドにアクセスします。

親コンポーネント内で次のようにします。

<template>
  <div>
    <child-component />
    <p>Parent Parameter: {
   
   { parentParameter }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      parentParameter: 'Initial Value'
    };
  },
  methods: {
    updateParentParameter(newValue) {
      this.parentParameter = newValue;
    }
  }
};
</script>

子コンポーネント内

<template>
  <div>
    <button @click="updateParentParameter('New Value')">Change Parent Parameter</button>
  </div>
</template>

<script>
export default {
  methods: {
    updateParentParameter(newValue) {
      this.$parent.updateParentParameter(newValue);
    }
  }
};
</script>

親コンポーネントの メソッドは、updateParentParameter 親パラメータを更新するために使用されます parentParameter。子コンポーネントのボタン クリック イベントは updateParentParameter メソッドを直接呼び出し、新しい値を 'New Value' 親コンポーネントに渡します。

子コンポーネントでは、 this.$parent メソッドを使用して親コンポーネントにアクセスし、 updateParentParameter そのメソッドを呼び出して親コンポーネントのメソッドをトリガーし、それによって親コンポーネントのパラメータを変更します。

このようにして、子ページのクリック イベントは、カスタム イベントを通じてパラメーターを渡すことなく、親ページのメソッドを直接トリガーできます。

この例がお役に立てば幸いです。他にご質問がございましたら、お気軽にお問い合わせください。