【Vue】组件间传值及传值校验

代码:

现在页面上应该只展示123。

接下来我们来创建一个全局组件,全局组件怎么创建,大家还记得吗?
我们这一块就用一个全局组件,‍‍app.component,我们创建一个叫做test这样的组件,里面我们给一个template,‍‍然后让ta等一个div test。‍‍

我这个组件是全局的,那么在我的应用下就可以用组件,怎么用?
直接通过标签的形式来用 是不是就可以了?你用test组件‍‍:

现在有一个父子关系的‍‍两个组件:

有的时候‍‍我子组件下展示的内容并不想把它写死,比如说现在这个test它的内容是死的,只能展示test。‍‍那么我希望它展示的内容,你通过在调用它的时候可以自定义,我们可以怎么去写?

我们可以这么去写,比如说我们叫做content等于‍‍ hello world:

我们把这个数据通过属性的形式传递给了test组件,‍‍那么这个组件如果想用这个content该怎么去用它?
在这里写一个props:

也就是说外部传递过来的属性参数,我通过props来把它接收过来,我通过‍‍ props接收content 外部传过来的属性,接收了属性之后,我就可以在这里‍‍【第21行】去使用它了,怎么用它?
是不是用两个花括号{ {content}}一个插值表达式的形式来去用content就可以了,

我们可以看到当我们这么去写代码的时候,‍‍子组件展示的内容不是固定的,而是父组件这里调用子组件的时候给它传递的一个动态的内容:

这样的话大家就先了解了父子组件传递这样的一个知识点,父组件调用子组件的标签,‍‍
然后通过标签上的属性向子组件传

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

代码写注释

请赞赏我

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值