이 글에서는 Vue.js 컴포넌트의 하위 컴포넌트에서 상위 컴포넌트(코드)까지의 통신을 소개합니다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>componentChildToParentCommunication</title> <script src="js/vue.js"></script> </head> <template id="parentComp"> <p> I am parent component:{{msg}},The Data from child:{{msg1}},{{msg2}} <hr> <child :m1="msg1" :m2="msg2"></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' } }, props:['m1','m2'] }; let parent={ template:'#parentComp', data(){ return { mgs:'parent Data', msg1:'the first parent Data', msg2:'the second parent Data' } }, components:{ child }, }; window.onload=function(){ new Vue({ el:'#app', components:{ parent } }); } /*子元素向父元素通信关键总结: 1:子元素定义时props:['msg1','msg2','msg3',...],用来放置从父元素拿过来的数据 2:在嵌套的子元素(使用时)上:<child :msg1="父数据1" :msg2="父数据2" :msg3="父数据3"></child>; */ </script> <p id="app"> <parent></parent> </p> </body> </html>
위 내용은 하위 구성요소에서 상위 구성요소(코드)로 Vue.js 구성요소 통신의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!