ホームページ > 記事 > ウェブフロントエンド > 子コンポーネントから親コンポーネントへの Vue.js コンポーネントの通信 (コード)
子コンポーネントから親コンポーネントへの Vue.js コンポーネントの通信 (コード)
- 高洛峰オリジナル
- 2017-03-12 11:36:431289ブラウズ
この記事では、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 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。