VUEJS 2.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 の下の関数を実行します。つまり、親コンポーネント

v-on:refreshbizlines="goToDetail"

の関数であることに注意してください。コンポーネントのモジュール名で子を呼び出すには、親コンポーネントの

を親コンポーネントに配置する必要があります。

コーディングを楽しんでください。

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

親コンポーネントの vuex メソッドが state サブコンポーネントを更新し、更新とレンダリングが間に合わない問題を解決する方法

Vue コメント フレームワークの実装について (親コンポーネント)

以上がVUEJS 2.0 子コンポーネントは親コンポーネントにアクセス/呼び出しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。