已解决
【Vue】修饰符表单提交方式自定义组件
来自网友在路上 165865提问 提问时间：2023-09-25 01:52:55阅读次数： 65
最佳答案 问答题库658位专家为你答疑解惑
【Vue】修饰符&表单提交方式&自定义组件
- 一.事件处理器
- 1. stop
- 2. prevent
- 4. 按键修饰符
- 5. 表单案例
- 二.自定义组件
- 三.组件通信
- 1.父传子
- 2.子传父
一.事件处理器
1. stop
在事件处理中，使用 stop 可以阻止事件的进一步传播。当事件被触发后，调用 stop 方法可以停止事件的冒泡传播，从而防止其他父元素捕获该事件。
示例代码：
html
<button @click.stop=“handleClick”>点击按钮
2. prevent
使用 prevent 可以阻止事件的默认行为。当事件被触发后，调用 event.preventDefault() 方法可以取消事件的默认行为，比如阻止表单的提交或者链接的跳转。
示例代码：
html
示例代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script><style type="text/css">.f30{font-size: 30px;}.one{background-color: red;height: 400px;width: 400px;}.two{background-color: blue;height: 300px;width: 300px;}.three{background-color: pink;height: 200px;width: 200px;}.four{background-color: yellow;height: 100px;width: 100px;}</style></head><body><div id="app"><div class="one" @click="f1"><div class="two" @click.stop="f2"><div class="three" @click.stop="f3"><div class="four" @click.stop="f4"></div></div></div></div><input :value="msg"><button @click.once="clickme">点我</button></div><script type="text/javascript">new Vue ({el:'#app',data(){return {msg:'hello',};},methods:{f1(){alert("f1");},f2(){alert("f2");},f3(){alert("f3");},f4(){alert("f4"); },clickme(){console.log(this.msg)}}});</script></body>
</html>
用了stop后，冒泡被阻止了
4. 按键修饰符
按键修饰符可以方便地处理特定按键触发的事件。通过在事件处理器后面添加 .key 后缀，指定特定的按键来触发相应的事件。
顺便提一嘴，vue允许为v-on在监听键盘事件时添加按键修饰符
全部的按键别名：
.enter
.tab
.delete (捕获 “删除” 和 “退格” 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
示例代码：
html <input @keyup.enter=“handleEnterKey” placeholder=“按下回车键触发”>
5. 表单案例
绑定值与取值
示例代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script><style type="text/css">.f30{font-size: 30px;}</style></head><body><div id="app">姓名<input name="name" v-model="name"/><br>密码<input type="password" v-model="pwd"><br>性别<span v-for="s in sexlist"><input type="radio" name="sex" v-model="sex" :value="s.id"/>{{s.name}}</span><br>籍贯：<select name="myaddr" v-model="myaddr"><option v-for="a in address" :value="a.id">{{a.name}}</option></select><br>爱好<span v-for="h in hobby" ><input type="checkbox" v-model="mylike" name="mylike" :value="h.id">{{h.name}}</span><br>个人简介：<textarea v-model="sign" cols="10" rows="5"></textarea><br>同意：<input type="checkbox" v-model="ok"/><br><button v-show="ok" @click="dosub">提交</button></div><script type="text/javascript">new Vue ({el:'#app',data(){return {name:'小猪',pwd:'123456',sexlist:[{name:'男',id:1,},{name:'女',id:2,},{name:'保密',id:0,}],sex:1,hobby:[{name:'洗浴',id:1},{name:'洗头',id:2},{name:'大保健',id:3}],mylike:[],address:[{name:'湖南',id:1},{name:'湖北',id:2},{name:'福建',id:3}],myaddr:null,sign:null,ok:false};},methods:{dosub(){
var obj={};
obj.name=this.name;
obj.pwd=this.pwd;
obj.sex=this.sex;
obj.address=this.myaddr;
obj.hobby=this.mylike;
obj.sign=this.sign;
console.log(obj);}}});</script></body>
</html>
二.自定义组件
案例
自定义组件可以通过 Vue 的组件系统来进行封装和复用。下面是一个简单的自定义组件案例，实现了一个计数器。
上述代码定义了一个名为 Counter 的自定义组件，在模板中包含三个元素：两个按钮和一个用于显示计数值的 元素。通过绑定按钮的点击事件来实现计数器的增减功能，计数值保存在组件的 count 数据中。
三.组件通信
1.父传子
父组件可以通过 props 将数据传递给子组件。子组件通过定义 props 来接收来自父组件的数据。
示例代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script><style type="text/css">.f30{font-size: 30px;}</style></head><body><div id="app">{{msg}}<my-button></my-button><br><my-button m='ks'n="10"></my-button></div><script type="text/javascript">new Vue ({el:'#app',components:{'my-button':{props:['m','n'],template:'<button @click="clikeme">被{{m}}点击了{{n}}次 </button>',data:function(){return {n:1}},methods:{clikeme(){this.n++;}}}},data(){return {msg:"11"}}});</script></body>
</html>
vue中父组件通过prop传递数据给子组件，而想要将子组件的数据传递给父组件，则可以通过自定义事件的绑定
`
2.子传父
示例代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script><style type="text/css">.f30{font-size: 30px;}</style></head><body><div id="app">{{msg}}<my-button></my-button><br><my-button m='ks' @xxx='getParam'></my-button></div><script type="text/javascript">new Vue ({el:'#app',components:{'my-button':{props:['m'],template:'<button @click="clikeme">被{{m}}点击了</button>',data:function(){return { n:1}},methods:{clikeme(){let name='刘兵';let bname='看见你的是';let price='白嫖';this.$emit('xxx',name,bname,price)}}}},data(){return {msg:"11"};},methods:{getParam(a,b,c){console.log(a,b,c);}}});</script></body>
</html>
查看全文
99%的人还看了
相似问题
- Tekton — 通过tekton-operator部署tekton组件
- vue3中使用全局自定义指令和组件自定义指令
- HarmonyOS ArkTS 基础组件的使用（四）
- 界面控件DevExpress WPF流程图组件，完美复制Visio UI！(一)
- Vue2系列 -- 组件自动化全局注册(require.context)
- 扩散模型实战（十一）：剖析Stable Diffusion Pipeline各个组件
- django DRF认证组件示例
- MySQL内部组件与日志详解
- 前端新手Vue3+Vite+Ts+Pinia+Sass项目指北系列文章 —— 第五章 Element-Plus组件库安装和使用
- 修改el-radio-group样式,自定义单选组件
猜你感兴趣
版权申明
本文"【Vue】修饰符表单提交方式自定义组件"：http://eshow365.cn/6-13148-0.html 内容来自互联网，请自行判断内容的正确性。如有侵权请联系我们，立即删除！
- 上一篇: 关于Godot动态生成节点的细节
- 下一篇: pytorch安装教程