Vuejs2.0の子コンポーネントが親コンポーネントのメソッドを呼び出す

レイアウトの問題により、サブコンポーネントが親コンポーネントにデータを渡し、親コンポーネントの特定のメソッドを実行する必要がある場合があります。この記事では主に、Vuejs 2.0 サブコンポーネントが親コンポーネントにアクセス/呼び出す方法 (サンプルコード) を紹介します。 . 必要な友達は参考にできるので、皆さんのお役に立てれば幸いです。

コードについてはあまり言うことはありません:

子コンポーネント:

<template> 
  <p class="isShowing" ref="isShowing"> 
    <p class="menu-wrapper" ref="scroll_warpper" v-show="!hid_show_switch"> 
      <ul ref="scroll_warpper_ul"> 
        <li class="menu-item" @click="goToFatherDetail(233)"> 
        </li> 
      </ul> 
    </p> 
    <v-loading class="isloading" v-show="hid_show_switch"></v-loading> 
  </p> 
</template> 
<script type="text/ecmascript-6"> 
  export default { 
    methods: { 
      goToFatherDetail (itemId) { 
        // this.$parent.$router.push(&#39;goToDetail&#39;); 
        console.log(&#39;子组件方法走了&#39; + itemId); 
        this.$emit(&#39;refreshbizlines&#39;, itemId); /* <span style="font-family: Arial, Helvetica, sans-serif;">itemId就是子要传的数据 - 这里很重要,refreshbizlines就是父组件$on监测的自定义函数不是父组件的自定义函数。*/</span> 
      } 
    } 
  }; 
</script>

親コンポーネント:

<template> 
  <p class="main-wrapper"> 
      <p class="tab-wrapper"> 
        <p class="tab-item"> 
          <router-link to="/isShowing" class="table-item-text">正在热映</router-link> 
        </p> 
        <p class="tab-item"> 
          <router-link to="/willShow" class="table-item-text">即将上映</router-link> 
        </p> 
      </p> 
    </p> 
    <router-view class="items-show" v-on:refreshbizlines="goToDetail" keep-alive></router-view> 
  </p> 
</template> 
<script type="text/ecmascript-6"> 
  export default { 
    methods: { 
      goToDetail (itemId) { 
        console.log(&#39;父组件走你：&#39; + itemId); 
      } 
    }<strong> 
  }; 
</script></strong>

親コンポーネントはv-onを使用して検出する監視関数を作成し、最終的に生成されるコード同様です

on: {
   "refreshbizlines": function($event) {
    _vm.goToDetail(123)
}
}

したがって、原則として、子コンポーネントは親コンポーネントの検出関数refreshbizlinesにアクセスします。アクセスされると、refreshbizline以下の関数が実行されます

goToDetail、つまり、 の

goToDetail関数です。親コンポーネント

親コンポーネントの

に注意してください

v-on:refreshbizlines="goToDetail"

子コンポーネントを呼び出す親コンポーネントのモジュール名に配置する必要があります。

関連する推奨事項:

vuejs2.0 は、イベント監視データ転送に $emit を使用したページング コンポーネントを実装します_javascript スキル

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