suchen

Heim >Web-Frontend >js-Tutorial >Kommunikation von Vue.js-Komponenten von untergeordneten Komponenten zu übergeordneten Komponenten (Code)

Kommunikation von Vue.js-Komponenten von untergeordneten Komponenten zu übergeordneten Komponenten (Code)

高洛峰
高洛峰Original
2017-03-12 11:36:431342Durchsuche

Dieser Artikel stellt die Kommunikation von Vue.js-Komponenten von untergeordneten Komponenten zu übergeordneten Komponenten (Code) vor 

<!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:&#39;#childComp&#39;,
　　　　　　data(){
　　　　　　　　return {
　　　　　　　　　　msg:&#39;child Data&#39;
　　　　　　　　}
　　　　　　},
　　　　　　props:[&#39;m1&#39;,&#39;m2&#39;]
　　　　};

　　　　let parent={
　　　　　　template:&#39;#parentComp&#39;,
　　　　　　data(){
　　　　　　　　return {
　　　　　　　　　　mgs:&#39;parent Data&#39;,
　　　　　　　　　　msg1:&#39;the first parent Data&#39;,
　　　　　　　　　　msg2:&#39;the second parent Data&#39;
　　　　　　　　}
　　　　　　},
　　　　　　components:{
　　　　　　　　child
　　　　　　},
　　　　};

　　　　window.onload=function(){ 
　　　　　　new Vue({
　　　　　　　　el:&#39;#app&#39;,
　　　　　　　　components:{
　　　　　　　　　　parent
　　　　　　　　}
　　　　　　});
　　　　}

　　　　/*子元素向父元素通信关键总结：
　　　　　　1：子元素定义时props:[&#39;msg1&#39;,&#39;msg2&#39;,&#39;msg3&#39;,...],用来放置从父元素拿过来的数据
　　　　　　2：在嵌套的子元素(使用时)上：<child  :msg1="父数据1" :msg2="父数据2" :msg3="父数据3"></child>;
　　　　*/
　　</script>
　　　　<p id="app">
　　　　　　<parent></parent>
　　　　</p>
　　</body>
</html>


Das obige ist der detaillierte Inhalt vonKommunikation von Vue.js-Komponenten von untergeordneten Komponenten zu übergeordneten Komponenten (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Kommunikation von Vue.js-Komponenten von der übergeordneten Komponente zur untergeordneten übergeordneten Komponente (Code)Nächster Artikel：Kommunikation von Vue.js-Komponenten von der übergeordneten Komponente zur untergeordneten übergeordneten Komponente (Code)

In Verbindung stehende Artikel

Mehr sehen