Maison > Article > interface Web > Communication des composants Vue.js du composant parent vers le composant parent enfant (code)
Cet article Vue.jsCommunication des composants du composant parent au composant parent enfant (code)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>componentParentChildCommunication</title> <script src="js/vue.js"></script> </head> <template id="parentComp"> <p> I am parent component:{{msg}},The Data from child:{{msg2}} <hr> <!-- <child @自定义事件名="父方法"></child> --> <child @child="parentFn"></child> </p> </template> <template id="childComp"> <p>I am child component:{{msg}}</p> </template> <body> <script> let child={ template:'#childComp', data(){ return { msg:'child Data' } }, mounted(){ /*this.$emit('自定义事件名',数据);*/ this.$emit('child',this.msg); } }; let parent={ template:'#parentComp', data(){ return { msg:'parent Data', msg2:'' } }, components:{ child }, methods:{ parentFn(data){ this.msg2=data; } } }; window.onload=function(){ new Vue({ el:'#app', components:{ parent } }); } /*父元素向子元素通信关键总结: 1:在嵌套的子元素(使用时)上:<child @自定义事件名="父方法"></child>; 2:子元素在加载完成的钩子函数(mounted)上加一个方法:this.$emit('自定义事件名',数据); 3:父元素上的方法:父方法名(data){...} */ </script> <p id="app"> <parent></parent> </p> </body> </html>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!