zoukankan      html  css  js  c++  java
  • angular,vue,react的父子通信

    父子通信

    • 父传子

    vue:

    父组件:<child :msg="datamsg" ></child> //子组件的msg属性上加数据,datamsg是数据
    子组件:export default {
    			props:["datamsg"] //子组件得到的数据,保存在props中
    		}
    		html:
    			<p>{{msg}}</p> //在组件的html页面进行渲染
    

    将父组件中的数据以属性形式放在父组件里面的子组件上,然后子组件再在vue的实例中通过props:[]去得到父组件传的数据。

    react:

    父组件:<Child msg={datamsg}></Child> //子组件 传输的数据为datamsg 
    子组件:<p>{this.props.msg}<p> //子组件页面上渲染
    

    将父组件中的值放在子组件上,子组件就可以通过this.props.属性名得到。

    angular:

    父组件:
    js:
    export class Father{	//在装饰器下面的类里写的数据。
    	msg="来自父组件的问候"
    	}
    html:
    <app-child [msg]="msg"></app-child> //放在子组件的属性上
    子组件:
    js:引入Input模块
    	export class child{
    		@Input() msg; //子组件得到数据
    	}
    html:<p>{{msg}}</p> //子组件进行页面渲染
    

    在父组件的类里面吧数据写好,然后在父组件里面的子组件标签上写上动态属性,子组件通过引入Input模块,写上@Input()这个装饰器。然后就可以得到数据。

    • 子父通信

    vue:

    子组件:<button @click="giveData"></button>//在子组件的button按钮上添加点击事件
    export default {
    	data(){
    		return{
    			msg:"我是子组件的数据"
    		}
    	}
    	methods:{
    		giveData(){
    			this.emit("give-data",msg)//添加自定义事件
    		}
    	}
    }
    
    父组件:<child v-on:give-data="showData"></child> //在父组件的子组件标签上面添加自定义的方法
    	export default{
    		methods:{
    			showData(data){
    				console.log(data) //得到子组件传递过来的数据
    			}
    		}
    	}
    

    vue的子父通信是通过自定义事件emit完成的。需要在子组件上添加事件,然后在事件的方法里面创建一个自定义事件,并把数据放上去,然后在父组件里面的子组件标签上面使用自定义事件得到数据。

    react:

    使用state,将数据穿在状态中,父组件可以通过this.state获取到数据,而子组件也可以通过setState设置数据。

    angular:

    使用emit自定义事件
    子组件:
    	ts:
    		导入Output和EventEmitter两个模块
    		export class Child{
    			@Output() constmEventToApp=new EventEmitter();//创建emit事件
    			ngInit(){
    				this.constmEventToApp.emit("数据") //在dom挂载时将数据放入自定义事件中
    			}
    		}
    
    父组件:
    	html:
    	<Child (constmEventToApp)="handleData($event)"></Child>//将子组件中的自定义事件绑定到父组件下面的子组件标签上。
    	ts:
    	export class Father{
    		handleDate(ev){
    			console.log(ev);//ev就是子组件所传递过来的数据
    		}
    	}
    

    angular中的子父通信是通过emit自定义事件,需要引入output和eventEmitter两个模块,然后在父组件里面讲子组件绑定自定义事件。自定义事件必须要写上$event,这是子组件的数据。

  • 相关阅读:
    linux系统日志使用
    C# progressbar 用法
    python 新时代
    linux 常用命令 集锦
    c# DirectoryInfo类 详解
    哈佛(转)
    寒门难再出贵子
    排序算法
    JavaScript弹出框
    js中innerHTML与innerText的用法与区别
  • 原文地址:https://www.cnblogs.com/xiaojianwei/p/10087838.html
Copyright © 2011-2022 走看看