【Vue】修饰符&表单提交方式&自定义组件（有访必回）

全栈领域优质创作者

2023-09-19 20:49:13

https://blog.csdn.net/weixin_74318097/article/details/133040119?spm=1001.2014.3001.5501

感谢各位大佬！！

...全文

133 回复打赏收藏转发到动态举报

写回复

回复

切换为时间正序

请发表友善的回复…

发表回复

案例自定义组件可以通过 Vue 的组件系统来进行封装和复用。下面是一个简单的自定义组件案例，实现了一个计数器。上述代码定义了一个名为 Counter 的自定义组件，在模板中包含三个元素：两个按钮和一个用于显示计数值的元素。通过绑定按钮的点击事件来实现计数器的增减功能，计数值保存在组件的 count 数据中。

学会表单的取值与绑定让你的交互跟为简单，搭配上修饰符更是锦上添花！！

局部组件定义，表单修饰符与事件修饰符基本使用方法

Vue中规定，子组件通过props接受外部数据后只有使用该数据的权利，但没有修改该属性的权利。因为，如果子组件修改了外部传来的数据，数据不好控制。若其想要改变，就必须通知该数据的真正拥有者改变，也就是使用该组件的父文件。不是event原有的事件处理函数的演变，而是Vue自己定义的一种修饰符，如上述的修饰符分类中也将.sync分类自定义事件的修饰符，那么这个自定义事件是什么？渲染函数 JSX：使用JavaScript代替模板功能>事件&按键修饰符。事件处理：事件修饰符和按键修饰符。.sync的用法规则。

事件修饰符 在事件处理程序中调用event.preventDefault()或event.stopPropagation()是非常常见的需求。 .stop 阻止单击事件传播即阻止了事件冒泡，相当于调用了event.stopPropagation方法（通俗讲就是阻止事件向上级DOM元素传递） <div @click="show(1)"> <div @click="show(2)">测试</div> </div> 点击“测试”输出 ...

萌新成长乐园

11,662

社区成员

77

社区内容

发帖

与我相关

我的任务

开源笔记经验分享个人社区广东省·广州市

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章