Vue3中父子组件传值以及方法调用

Dear 丶 2023-10-11 15:55 30阅读 0赞

*  子组件接受父组件传的值  
    子组件通过生命props属性来接收父组件传递的值

//子组件
    <div>{
        {
        msg}}</div>
    
    export default {
        
    	name:"child"，
    	props:{
        
    		msg:{
        
    			type:String,
    			required:true,
    			default:""
    		}
    	},
    	setup(props,context){
        
    		return {
        
    			msg:props.msg
    		}
    	}
    }

***`通过在子组件标签声明属性的方式传值，属性的名需要和子组件props中的属性名一致`***

//父组件
    <child :msg="msg"><child>
    
    export default {
        
    	name:"parent"，
    	components:{
        child},
    	props:{
        
    	},
    	setup(props,context){
        
    		const msg = ref("父组件中的值")
    		return {
        
    			msg
    		}
    	}
    }

*  子组件调用父组件的方法

//子组件
    export default {
        
    	name:"child"，
    	props:{
        
    		msg:{
        
    			type:String,
    			required:true,
    			default:""
    		}
    	},
    	setup(props,context){
        
    		const callParentMethod = ()=>{
        
    			context.emit("print","这是参数")
    		}
    		return {
        
    			msg:props.msg,
    			callParentMethod
    		}
    	}
    }

子组件调用父组件方法需要通过context对象的emit方法，传入要调用的父组件的方法名以及参数，同时在父组件中的子组件标签声明@xxxx的冒泡方法

//父组件
    <child :msg="msg" @print="print"><child>
    
    export default {
        
    	name:"parent"，
    	components:{
        child},
    	props:{
        
    	},
    	setup(props,context){
        
    		const print = (param)=>{
        
    			console.log("子组件调用了父组件的方法，参数是："，param)
    		}
    		const msg = ref("父组件中的值")
    		return {
        
    			msg,
    			print
    		}
    	}
    }

*  父组件调用子组件的方法

//父组件
    <child :msg="msg" @print="print" ref="RefCid" ><child>
    
    export default {
        
    	name:"parent"，
    	components:{
        child},
    	props:{
        
    	},
    	setup(props,context){
        
    		//这个常量名要和子组件的ref属性一致
    		const RefCid = ref()
    		const callChildFun = ()=>{
        
    			RefCid.value.fun(1)
    		}
    		const msg = ref("父组件中的值")
    		return {
        
    			msg,
    			callChildFun,
    			RefCid
    		}
    	}
    }

//子组件
    export default {
        
    	name:"child"，
    	props:{
        
    		msg:{
        
    			type:String,
    			required:true,
    			default:""
    		}
    	},
    	setup(props,context){
        
    		const callParentMethod = ()=>{
        
    			context.emit("print","这是参数")
    		}
    	
    		const fun = (param) => {
        
    			console.log("子组件的方法被父组件调用了 参数是：",param)
    		}
    
    		return {
        
    			msg:props.msg,
    			callParentMethod,
    			fun
    		}
    	}
    }

父组件调用子组件的方法需要在子组件标签中声明ref属性，同时调用ref()函数创建一个常量，这个常量名要和ref属性的值一致，通过xxx.value.子组件的方法(参数)调用，  
最后不要忘记将常量返回。