国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

vue 表單驗證按鈕事件交由父組件觸發的方法

2019-11-19 12:20:15
字體:
來源:轉載
供稿:網友

vue 表單驗證按鈕事件交由父組件觸發,不直接再子組件上操作的方法

子組件:

//內容部分<Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80">  <FormItem label="Age" prop="age">    <Input type="text" v-model="formCustom.age" number></Input>  </FormItem>  <FormItem>    <Button type="primary" @click="handleSubmit('formCustom')">Submit</Button>    <Button @click="handleReset('formCustom')" style="margin-left: 8px">Reset</Button>  </FormItem></Form>

子組件js部分

export default {  data () {    return {      formCustom: {        age: ''      },      ruleCustom: {        age: [          { required: true, message: '年齡不為空', trigger: 'blur' }        ]      }    }  },  methods: {    handleSubmit (name) {      this.$refs[name].validate((valid) => {        if (valid) {          const form = this.formCustom          // 在這將事件傳遞出去          this.$emit('submit', form)        } else {          this.$Message.error('Fail!');        }      })    },    handleReset (name) {      this.$refs[name].resetFields();    }  }}

父組件:

 //子組件 <modalContent @submit="handleSubmit"/>

父組件js部分

import modalContent from '子組件位置(這里沒寫)'export default {  components: { modalContent },  data () {    return {}  },  methods: {    // 子組件的點擊觸發事件    handleSubmit(form) {      this.$Message.success('Success!');    }  }} 

遇到某些xiagn要將按鈕寫在父組件上,但又需要調用子組件做驗證之類的時候可以借鑒一下,驗證請忽略,這里主要是按鈕的事件

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 伊川县| 甘南县| 巴彦县| 安塞县| 印江| 安陆市| 长乐市| 桦川县| 永春县| 西畴县| 高阳县| 沾化县| 德化县| 镇宁| 封开县| 无为县| 石景山区| 静乐县| 镇巴县| 扶沟县| 马鞍山市| 扎兰屯市| 桂平市| 彩票| 清水河县| 阿拉善右旗| 防城港市| 聂荣县| 剑川县| 松潘县| 丽江市| 电白县| 邹城市| 大悟县| 手机| 乐亭县| 凤台县| 工布江达县| 阿瓦提县| 崇文区| 莎车县|