집 >웹 프론트엔드 >JS 튜토리얼 >상위 구성요소에서 하위 상위 구성요소로의 Vue.js 구성요소 통신(코드)

상위 구성요소에서 하위 상위 구성요소로의 Vue.js 구성요소 통신(코드)

高洛峰원래의: 2017-03-12 11:34:511329검색

이 글 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:&#39;#childComp&#39;,
　　　　　　data(){
　　　　　　　　return {
　　　　　　　　　　msg:&#39;child Data&#39;
　　　　　　　　}
　　　　　　},
　　　　　　mounted(){
　　　　　　/*this.$emit(&#39;自定义事件名&#39;,数据);*/
　　　　　　　　this.$emit(&#39;child&#39;,this.msg);
　　　　　　}
　　　　};

　　　　let parent={
　　　　　　template:&#39;#parentComp&#39;,
　　　　　　data(){
　　　　　　　　return {
　　　　　　　　　　msg:&#39;parent Data&#39;,
　　　　　　　　　　msg2:&#39;&#39;
　　　　　　　　}
　　　　　　},
　　　　　　components:{
　　　　　　　　child
　　　　　　},
　　　　　　methods:{
　　　　　　　　parentFn(data){
　　　　　　　　　　this.msg2=data;
　　　　　　　　}
　　　　　　}
　　　　};

　　　　window.onload=function(){ 
　　　　　　new Vue({
　　　　　　　　el:&#39;#app&#39;,
　　　　　　　　components:{
　　　　　　　　　　parent
　　　　　　　　}
　　　　　　});
　　　　}
　　　　/*父元素向子元素通信关键总结：
　　　　　　1：在嵌套的子元素(使用时)上：<child @自定义事件名="父方法"></child>;
　　　　　　2：子元素在加载完成的钩子函数（mounted）上加一个方法:this.$emit(&#39;自定义事件名&#39;,数据);
　　　　　　3：父元素上的方法:父方法名(data){...}
　　　　*/
　　</script>

　　<p id="app">
　　　　<parent></parent>
　　</p>
　　</body>
</html>

위 내용은 상위 구성요소에서 하위 상위 구성요소로의 Vue.js 구성요소 통신(코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：Vue.js 구성 요소 피어 간 통신(코드)다음 기사：Vue.js 구성 요소 피어 간 통신(코드)