VueJS communication method examples between parent subcomponents

This example describes the communication method between the parent subcomponents of VueJS. Share to everyone for reference, specifically:

1. Parent component to subcompachment message

  // Parent.Vue  
Import vchild from './child.vue' export default {components: {vchild}, data () {return {// parent component uses Message as a parameter transmission Message: 'from parent component message'}}}
 // CHild.Vue   

{MSG}}

export default {// Define the external system to define a parameter // definition of the external system MSG variable, type is string, default is empty string PrOPS: {msg: {type: string, default: "}}}
// Router / Index.jsimport Vue from ‘Vue’Import Router from’ Vue-Router’Import HelloWorld from ‘@ / Components / HelloWorld’Import ParenT from ‘@ / Test / Parent’Vue.use (Router) Export Default New Router ({routes: [{PATH:’ / ‘, Name:’ HelloWorld ‘, Component: HelloWorld}, {Path:’ / Parent ‘, (123)
   
// Parent. // Parent. Vue

Import vchild from ‘./child.vue’ export default {company {vchild}, data () {return {// Father Components Transfer message as a parameter in subcomponents: ‘from parent component message’}}}} {console.log (params)}}}
   
// CHild.Vue
{{msg}}
EXPORT DEFAULT {// Defines an external system to define an external system to define an MSG variable, the type is String, the default is empty string PROps: {msg: {type: string, default: “}}, methods: {NOTIFYPARENT () {var params = {m: 1, n: 2} // subcomponents inform the parent component in the form of an event (need to use $ EMIT method, first parameter, event name; parameter attached to the second event) This. $ EMIT (‘ChildNotify’, Params)}}}
   [ Reference: https: //jingyan.baidu.com/Article/455a99505b639da1662778e1.html 

It is hoped that this article will help you Vue.js programming.

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment