VUEJS 2.0 child component accesses/calls parent component-JS Tutorial-php.cn

VUEJS 2.0 child component accesses/calls parent component

不言

Release： 2018-06-29 16:33:58

Original

1398 people have browsed it

The following is an example of how a VUEJS 2.0 subcomponent accesses/calls a parent component. It has a very good reference value and I hope it will be helpful to everyone.

Sometimes due to layout problems, the child component needs to pass data to the parent component and execute a certain method of the parent. I won’t go into the code:

Child Component:

<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>

Copy after login

Parent component:

<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>

Copy after login

The parent component uses v-on to make a monitoring function to detect. The final generated code is similar to

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

Copy after login

So the principle is that the child component accesses the detection function refreshbizlines of the parent component. If accessed, the function below refreshbizline is executed

goToDetail -- that is, the parent component's

goToDetail function

Note that the

v-on:refreshbizlines="goToDetail"

Copy after login

of the parent component must be placed on the module name of your parent component calling the child component.

Wish you happy coding.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to solve the problem that the vuex method in the parent component updates the state and the child component cannot be updated and rendered in time

About Implementation of Vue comment framework (implementation of parent component)

The above is the detailed content of VUEJS 2.0 child component accesses/calls parent component. For more information, please follow other related articles on the PHP Chinese website!