组件emit的声明触发事件

1.emit的基本认知和用法

1.emit的基本了解和原理

我们在页面中想要从页面传递数据给我们的子组件是可以使用我们的emit属性来作为我们传递的桥梁。

保存好了之后在我们的主页面去调用我们的组件然后使用我们设置的传递值

保存好了之后去页面查看我们的效果。

当我们对按钮进行点击的时候会发现我们传递过去的值,已经在下面显示出来了。

这个就是我们基础的父子通信,指的是我们点击子组件时会向我们的主页面传递值也就是通信,让我们子组件的值传递到我们的主页面来。

我们可以根据这个通信来为我们的页面做一些小改动比如改变我们的背景颜色:

我们这种直接传递值的情况是比较少的,上面这个只是基本的了解我们的emit的用法。

2.设置两个参数的emit

我们在传递值的时候不单单只有我们的button可以传递,我们的input组件同样也可以完成传递值,这个时候我们就可以设置我们的另一个emit的参数了。

我们在设置好了我们的另一个传递值的时候,可以在我们的组件里面进行输出,来查看我们时候传递过来了我们的值。

我们可以直接使用e.detail.value来输出我们传递的值。

但是我们可以看的这个时候输出的值位置是在我们的组件里面的,我们如果需要将其输出值的位置放在我们的当前页面中时需要我们使用我们的emit("chage",e.detail.value)这个chage是我们在上面定义的一个传递值的名字。

我们也可以根据这个来实现我们在输入框输入的数字来改变我们的下方文字的大小。

当我们设置好了以上所添加的属性和变量以及我们传递的值时保存,在我们的页面中运行看效果。

我们在虽然框里面输入的12的值是会发现变换并不明显,我们将12改为其他数字比如35在来看一下我们的文字变化。

我们发现了我们的文字有了明显的变换,也就说明了我们可以通过我们在输入框里面输入值来改变我们页面效果。

以上就是我们的一些emit的基本用法和认知了,更多的可以去官方文档里面查看。

连接:状态选项 | Vue.js (vuejs.org)

  • 5
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值