欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2018年12月17日 14:33:33   作者:Linan  
這篇文章主要介紹了vue 表單驗證按鈕事件交由父組件觸發(fā)的方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

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

子組件:

//內(nèi)容部分

<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: {
    // 子組件的點擊觸發(fā)事件
    handleSubmit(form) {
      this.$Message.success('Success!');
    }
  }
} 

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

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 關(guān)于Pinia狀態(tài)持久化問題

    關(guān)于Pinia狀態(tài)持久化問題

    這篇文章主要介紹了關(guān)于Pinia狀態(tài)持久化問題,具有很好的參考價值,希望對大家有所幫助。
    2023-03-03
  • vue結(jié)合vue-electron創(chuàng)建應(yīng)用程序小結(jié)

    vue結(jié)合vue-electron創(chuàng)建應(yīng)用程序小結(jié)

    這篇文章主要介紹了vue結(jié)合vue-electron創(chuàng)建應(yīng)用程序,本文給大家介紹了安裝electron有兩種方式,兩種方式創(chuàng)建的項目結(jié)構(gòu)大不相同,需要的朋友可以參考下
    2024-03-03
  • 詳解Vue-cli3 項目在安卓低版本系統(tǒng)和IE上白屏問題解決

    詳解Vue-cli3 項目在安卓低版本系統(tǒng)和IE上白屏問題解決

    這篇文章主要介紹了Vue-cli3 項目在安卓低版本系統(tǒng)和 IE 上白屏問題解決,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-04-04
  • iview實現(xiàn)圖片上傳功能

    iview實現(xiàn)圖片上傳功能

    這篇文章主要為大家詳細(xì)介紹了iview實現(xiàn)圖片上傳功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-06-06
  • vue自定義開發(fā)滑動圖片驗證組件

    vue自定義開發(fā)滑動圖片驗證組件

    這篇文章主要為大家詳細(xì)介紹了vue自定義開發(fā)滑動圖片驗證組件,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • vue中checkbox如何修改為圓形樣式

    vue中checkbox如何修改為圓形樣式

    這篇文章主要介紹了vue中checkbox如何修改為圓形樣式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-12-12
  • Vue.js 插件開發(fā)詳解

    Vue.js 插件開發(fā)詳解

    本文會通過一個簡單的vue-toast插件,來幫助了解掌握插件的開發(fā)和使用。具有很好的參考價值,下面跟著小編一起來看下吧
    2017-03-03
  • vue等待數(shù)據(jù)渲染完成后執(zhí)行下一個方法問題

    vue等待數(shù)據(jù)渲染完成后執(zhí)行下一個方法問題

    這篇文章主要介紹了vue等待數(shù)據(jù)渲染完成后執(zhí)行下一個方法問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-12-12
  • 項目遷移vite引入圖片資源報require?is?not?defined問題的解決辦法

    項目遷移vite引入圖片資源報require?is?not?defined問題的解決辦法

    這篇文章主要給大家介紹了關(guān)于項目遷移vite引入圖片資源報require?is?not?defined問題的解決辦法,文中通過代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vite具有一定的參考借鑒價值,需要的朋友可以參考下
    2024-01-01
  • 詳解vue-cli@2.x項目遷移日志

    詳解vue-cli@2.x項目遷移日志

    這篇文章主要介紹了詳解vue-cli@2.x項目遷移日志,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-06-06

最新評論