亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Vue?$event作為參數(shù)傳遞使用demo

 更新時間:2023年07月03日 10:30:02   作者:CUI_PING  
這篇文章主要介紹了Vue?$event作為參數(shù)傳遞使用demo詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

1.在原生事件中, $event 參數(shù)是事件對象

<a-button @click="getEvent($event)">點擊</a-button>
getEvent(e){
  console.log(e) //事件對象
  //e.target  當前點擊的元素
  //e.currentTarget  綁定事件的元素
  //e.currentTarget.someMethodxxx()
}

2.在自定義事件中,$event 是傳遞過來的參數(shù)數(shù)據(jù)

父組件

    <template slot="caseBlackLogSlot" slot-scope="text, record">
            <table-cell-edit
              :disable-cell="disableCell"
              :text="record.caseBlackLog"
              @change="cellChange(record.id, 'caseBlackLog', $event)"
            ></table-cell-edit>
    </template>
methods: {
    // value 是子組件傳過來的數(shù)據(jù)
    cellChange(key, dataIndex, value) {
      for (let i = 0; i < this.dataSource.length; i++) {
        if (key === this.dataSource[i].id) {
          this.dataSource[i][dataIndex] = value
          break
        }
      }
     this.$refs.webflow.setFieldValue('childTableInline1', this.dataSource)
}

子組件

<template>
  <div>
    <a-input
      :disabled="disableFlg"
      style="width: 100px"
      :value="value"
      @change="handleChanged"
      @blur="blur"
    />
  </div>
</template>
<script>
import components from './_import-components/table-cell-edit-import'
export default {
  name: 'TableCellEdit',
  metaInfo: {
    title: 'TableCellEdit',
  },
  components,
  props: {
    text: String,
    disableCell: Boolean,
  },
  data() {
    return {
      value: this.text,
      disableFlg: this.disableCell,
    }
  },
  methods: {
    blur() {
      // $emit 向上傳遞數(shù)據(jù)
      this.$emit('change', this.value)
    },
    handleChanged(e) {
      //這里的e,就是第一種 :$event 事件對象參數(shù)
      this.value = e.target.value
    },
  },
}
</script>
<style module lang="scss">
@use '@/common/design' as *;
</style>

以上就是Vue $event作為參數(shù)傳遞使用demo的詳細內(nèi)容,更多關(guān)于Vue$event參數(shù)傳遞的資料請關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • Ant Design Vue table中列超長顯示...并加提示語的實例

    Ant Design Vue table中列超長顯示...并加提示語的實例

    這篇文章主要介紹了Ant Design Vue table中列超長顯示...并加提示語的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-10-10
  • Vite配置路徑別名的簡單實現(xiàn)方法

    Vite配置路徑別名的簡單實現(xiàn)方法

    Vite項目中我們可以手動將src路徑設(shè)置**@**路徑別名,可以省下很多引入路徑的冗余路徑,下面這篇文章主要給大家介紹了關(guān)于Vite配置路徑別名的簡單實現(xiàn)方法,需要的朋友可以參考下
    2023-04-04
  • ant?菜單組件報錯Cannot?read?property?‘isRootMenu‘?of?undefined

    ant?菜單組件報錯Cannot?read?property?‘isRootMenu‘?of?undefin

    這篇文章主要介紹了ant?菜單組件報錯Cannot?read?property?‘isRootMenu‘?of?undefined解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-08-08
  • Vue移動端實現(xiàn)圖片上傳及超過1M壓縮上傳

    Vue移動端實現(xiàn)圖片上傳及超過1M壓縮上傳

    這篇文章主要為大家詳細介紹了Vue移動端實現(xiàn)圖片上傳及超過1M壓縮上傳,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-12-12
  • Vue3實現(xiàn)pdf在線預(yù)覽的三種方式

    Vue3實現(xiàn)pdf在線預(yù)覽的三種方式

    這篇文章主要為大家詳細介紹了使用Vue3實現(xiàn)pdf在線預(yù)覽的三種常用方式,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下
    2025-02-02
  • elementUI同一頁面展示多個Dialog的實現(xiàn)

    elementUI同一頁面展示多個Dialog的實現(xiàn)

    這篇文章主要介紹了elementUI同一頁面展示多個Dialog的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-11-11
  • Vue.js事件處理器與表單控件綁定詳解

    Vue.js事件處理器與表單控件綁定詳解

    這篇文章主要為大家詳細介紹了Vue.js事件處理器與表單控件綁定詳解的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-03-03
  • vue-admin-template配置快捷導航的代碼(標簽導航欄)

    vue-admin-template配置快捷導航的代碼(標簽導航欄)

    這篇文章主要介紹了vue-admin-template配置快捷導航的方法(標簽導航欄),本文通過實例代碼給大家介紹的非常詳細,對大家學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-09-09
  • VUE3中watch監(jiān)聽使用實例詳解

    VUE3中watch監(jiān)聽使用實例詳解

    watch函數(shù)用來偵聽特定的數(shù)據(jù)源,并在回調(diào)函數(shù)中執(zhí)行副作用,下面這篇文章主要給大家介紹了關(guān)于VUE3中watch監(jiān)聽使用的相關(guān)資料,需要的朋友可以參考下
    2022-06-06
  • Nuxt.js實戰(zhàn)詳解

    Nuxt.js實戰(zhàn)詳解

    這篇文章主要介紹了Nuxt.js實戰(zhàn)詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-01-01

最新評論