VUEJS 2.0 sub-component access/call the instance of the parent component, vuejs2.0

VUEJS 2.0 sub-component access/call the instance of the parent component, vuejs2.0

Sometimes, due to layout problems, the child component needs to pass data to the parent component and execute a parent-level method, not to mention the Code:

Child components:

<Template> <div class = "isShowing" ref = "isShowing"> <div 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> </div> <v-loading class =" isloading "v-show =" hid_show_switch "> </v-loading> </div> </template> <script type = "text/ecmascript-6"> export default {methods: {goToFatherDetail (itemId) {// this. $ parent. $ router. push ('gotodetail'); console. log ('sub-component method follows '+ itemId); this. $ emit ('refreshbizlines' , ItemId);/* <span style = "font-family: Arial, Helvetica, sans-serif;"> itemId is the data to be transmitted by the sub-account.-It is very important here, refreshbizlines is the custom function monitored by the parent component $ on, not the custom function of the parent component. */</Span >}}; </script>

Parent component:

<Template> <div class = "main-wrapper"> <div class = "tab-wrapper"> <div class = "tab-item"> <router-link to =" /isShowing "class =" table-item-text "> loading </router-link> </div> <div class =" tab-item "> <router-link = "/willShow" class = "table-item-text"> coming soon </router-link> </div> <router-view class = "items-show" v-on: refreshbizlines = "goToDetail" keep-alive> </router-view> </div> </template> <script type = "text/ecmascript-6"> export default {methods: {goToDetail (itemId) {console. log ('parent component is yours: '+ itemId) ;}< strong >}; </script> </strong>

The parent component uses v-on as a monitoring function for detection. The final generated code is similar

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

Therefore, the principle is that the child component accesses the detection function refreshbizlines of the parent component. When the child component accesses the refreshbizlines, the function below refreshbizline is executed.

GoToDetail -- that is, the parent component's

GoToDetail Function

Note that

v-on:refreshbizlines="goToDetail"

It must be placed on the name of the module where your parent component calls the child component.

I wish you a pleasant coding experience.

The above VUEJS 2.0 sub-component access/call of the parent component instance is all the content shared by xiaobian. I hope to give you a reference, and I hope you can provide more support for the customer's house.