Vuejs2.0 child component calls the method of parent component-CSS Tutorial-php.cn

Vuejs2.0 child component calls the method of parent component

小云云

Release： 2018-02-09 11:40:12

Original

2286 people have browsed it

Sometimes due to layout problems, the sub-component needs to pass data to the parent component and execute a certain method of the parent. This article mainly introduces the method (sample code) of the Vuejs 2.0 sub-component to access/call the parent component, which is required Friends can refer to it, I hope it can help everyone.

Not much to say about 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 parent If the component's detection function refreshbizlines is accessed, the function below refreshbizline will be executed

goToDetail -- that is, the

goToDetail function of the parent component

Pay attention to the

of the parent component

v-on:refreshbizlines="goToDetail"

Copy after login

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

Related recommendations:

vuejs2.0 implementation of paging components using $emit for event monitoring data transfer_javascript skills

The above is the detailed content of Vuejs2.0 child component calls the method of parent component. For more information, please follow other related articles on the PHP Chinese website!