Vuejs2.0 methods for child components calling parent components

Sometimes, because of layout problems, you need the child component to pass the data to the parent component, and execute a method of the parent, this article mainly introduces the method of accessing/calling the parent component of the VUEJS 2.0 sub-component (sample code), the need friend can refer to, hope can help everyone.

Not much to say on the code:

Sub-components:

<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 (' Gotodetail ');         Console.log (' Sub-assembly method gone ' + itemId);         this. $emit (' Refreshbizlines ', itemId); /* <span style= "font-family:arial, Helvetica, Sans-serif;" >itemid is the data to be transmitted-this is important, Refreshbizlines is the parent component $on The custom function that is monitored is not a custom function of the parent component. */</span>       }}}   ; </script>

Parent component:

<template>   <p class= "Main-wrapper" >       <p class= "Tab-wrapper" >         <p class= "Tab-item" >           <router-link to= "/isshowing" class= "Table-item-text" > being aggressively </router-link>         </p>         <p class= "Tab-item" >           <router-link to= "/willshow" class= "Table-item-text" > Upcoming releases </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 (' Parent component walking you: ' + itemId );       }     } <strong>   }; </script></strong>

The parent component uses v-on to do a monitoring function to detect that the resulting code is similar

On: {   "Refreshbizlines": function ($event) {    _vm.gotodetail (123)}}

So the principle is that the child component accesses the parent component's detection function Refreshbizlines, and then executes the function refreshbizline the following

Gotodetail-that is, the parent component's

Gotodetail function

Note the parent component's

V-on:refreshbizlines= "Gotodetail"

Be sure to put it on the module name of the child component called by your parent component.