vue父子组件进行通信方式

在vue中如何实现父子组件通信,本篇博客将会详细介绍父子组件通信的流程。
在这里插入图片描述
如图所示,父组件向子组件传递数据,可以通过props,子组件向父组件传递数据可以通过触发事件来进行。
一、props
父组件向子组件传递的数据,通过props进行传递,我们可以把props理解为属性。props传递存在两种格式,一种是数组格式,另一种是对象类型格式。其中第二种对象类型可以设置是否为必须数据,以及是否存在默认值数据。
第一种用法:数组

//父组件
 <HelloWorld :title="title"></HelloWorld>
//子组件
  props: ["title"],

第二种用法:对象

//父组件:
<HelloWorld :title="title"></HelloWorld>
//子组件:
  props: {
   
    title:{
   
      type:String,
      required:true,
      default() {
   
        return "我是title"
      }
    }
  },
//上面default为什么是一个函数?
因为是一个组件,组件在其他组件都能使用,并且如果default是一个key;value形式,并且value是一个引用
类型的值,则如果要更改props的值,则其他组件的值也会更改。

type属性的类型有哪些?

type属性的类型有:String,Number,Boolean,Array,Object,Date, Function,Symbol。

三、对象类型的其他写法

props:{
   
	messageinfo:String,
	
	propsA:Number,
	propsC:{
   
		type:String,
		required:true
	},
	propsE:{
   
		type:Object,
		default(){
   
			return {
   message:"hello"}
		}
	},
	//自定义验证函数
	title:{
   
      validator(value) {
   
        console.log("hhh")
        return ["hello","world"].includes(value)
      }
    }
}

二、细节三props大小写命名
props名使用驼峰命名,则可以使用-连接


                
  • 6
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值