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