VUE_vue组件参数的传递

一、父到子传递参数

基础传递对象

传递的是字符串需要加’'单引号
组件Btn

<Btn :title="'修改'" />

获取参数

data(){
    
    
},
//方式一
//props:['title']		
//方式二
props:{
    
    
	// title:String      //直接接受
	title:{
    
    				//对象接受
		type:String,
		default:'标题'
	}
}

使用

{
   
   {title}}

传递对象

组件Btn

<Btn :obj="obj" />

data(){
    
    

},
obj:{
    
    
 title:'修改',
 color:'red'
}

获取参数

data(){
    
    
},
props:{
    
    
	obj:{
    
    
		title:String
		color:String
	}
}

使用

{
   
   {obj.title}}

二、子到父传递参数

Btn子组件：

<button @click="send()">{
   
   {msg}}</button>

<script>
data(){
     
     
	return {
     
     
		msg:"我是按钮组件"
	}
},
methods:{
     
     
	send(){
     
     
		//			发射的名字  内容
		this.$emit('e-child','12345')
	}
}
</script>

父组件：

<!-- 接收的名字e-child  触发acceptSon方法 -->
 <Btn @e-child="acceptSon" />
<script>
data(){
     
     
	return {
     
     
	
	}
},
methods:{
     
     
	//d是传递过来的值  12345
	acceptSon(d){
     
     
		console.log(d)
	}
}
</script>