이 글 Vue.js부모 컴포넌트에서 자식 부모 컴포넌트로의 컴포넌트 통신(코드)
<!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>
위 내용은 상위 구성요소에서 하위 상위 구성요소로의 Vue.js 구성요소 통신(코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!