cari

Rumah  >  Artikel  >  hujung hadapan web  >  Vue.js组件的通信之父组件向子父组件的通信（代码）

Vue.js组件的通信之父组件向子父组件的通信（代码）

高洛峰
高洛峰asal
2017-03-12 11:34:511283semak imbas

这篇文章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>

Atas ialah kandungan terperinci Vue.js组件的通信之父组件向子父组件的通信（代码）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Vue.js组件之同级之间的通信（代码）Artikel seterusnya：Vue.js组件的通信之子组件向父组件的通信（代码）

Artikel berkaitan

Lihat lagi