成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue中props的雙向綁定

Amos / 2299人閱讀

摘要：在的學(xué)習(xí)中，一開始我是自己寫組件練手的，在這個過程中我遇到一個問題父組件傳遞給子組件參數(shù)直接在子組件里直接使用是可以實(shí)時更新的如果在，等聲明或者直接賦值給的時候，再用的時候是不可以實(shí)時更新的內(nèi)部的是可以實(shí)時更新的但是內(nèi)部不可以強(qiáng)制去改變父元

在vue的學(xué)習(xí)中，一開始我是自己寫組件練手的，在這個過程中我遇到一個問題：
props：父組件傳遞給子組件參數(shù)
（1）props直接在子組件里直接使用是可以實(shí)時更新的
（2）props如果在created，mounted等聲明或者直接賦值給data的時候，再用data的時候是不可以實(shí)時更新的
（3）內(nèi)部的data是可以實(shí)時更新的
（4）但是內(nèi)部不可以強(qiáng)制去改變父元素傳遞過來的props，這樣是官方不允許的而且是不嚴(yán)謹(jǐn)?shù)?/p>

那么，我在寫模態(tài)框組件的時候就產(chǎn)生一個很矛盾的問題，如果父級props控制了組件內(nèi)部的顯示和隱藏，
內(nèi)部點(diǎn)擊模態(tài)框陰影的時候也可以讓其自動隱藏，我到底去修改什么值，修改了之后怎么去改變父組件傳遞過來的props，
給全局一個反饋呢。
在看過文章和自己動手操作后選取了一種方式，將內(nèi)部的data和props進(jìn)行關(guān)聯(lián)，采用vue中v-modal的原理，值發(fā)生變化（input事件），
對應(yīng)的數(shù)據(jù)也發(fā)生相應(yīng)的改變：
不多說，直接貼代碼：

子組件：
template：

javascript：

import { mapState, mapActions } from "vuex"
  import _ from "lodash"

  export default {
    name: "msg-modal",
    data () {
      return {
        isShow: this.value
      }
    },
    props: {
      value: {
        type: Boolean,
        default: false
      },
      closeable: {
        type: Boolean,
        default: false
      },
      btnTxt: {
        type: [String, Number],
        default: "確定"
      },
      content: {
        default: "內(nèi)容"
      }
    },
    watch: {
      value (val) {
        this.isShow = val;
      },
      isShow (val) {
        this.$emit("input", val);
      }
    },
    computed: {
      ...mapState({
        allAnchorList: state => state.anchor.list.data
      })
    },
    methods: {
      ...mapActions(["removeAnchor"]),
      onClick () {
        this.$emit("onClick")
      },
      onMaskClose () {
        if(!this.closeable) {
          return
        }

        Object.assign(this.$data, this.$options.data())
      }
    }
  }

less：

.modal {
  position: fixed;
  z-index: 800;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: table;
  transition: all .3s;
  background-color: transparent;

  &.active{
    opacity: 1;
  }

  .modal-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: rgba(0, 0, 0, .5);
  }

  .modal-wrapper {
    display: table-cell;
    vertical-align: middle;
    .modal-container {
      width: 300px;
      margin: 0 auto;
      border-radius: 2px;
      //box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
      transition: all .3s ease;
      font-family: Helvetica, Arial, sans-serif;
      .header{
        position: relative;
        backgroud-color: #fff,
        min-height: 50px;
      }

      .modal-body {
        margin: 20px 0;
      }
      
     .footer {
      padding-bottom: 26px;
      overflow: hidden;
      border-bottom-left-radius: 4px !important;
      border-bottom-right-radius: 4px !important;
      background-color: #fff;
      .btn {
        height: 36px;
        line-height: 36px;
        width: 230px;
        margin: 0 auto;
        color: #fff;
        font-size: 14px;
        text-align: center;
        cursor: pointer;
        user-select: none;
        background-color: #2859ED;
        border-radius: 4px;
      }
     }
    }
  }
}

父組件的引用：
template:



javascript:

樣式隨便寫的，
主要就是用vue的v-model原理，將值與被傳遞的props實(shí)現(xiàn)雙向綁定，
需要注意的是在組件mounted的時候需要對組件初始化中的傳遞的props賦值給綁定的v-model的value
自己也是才摸索vue全家桶階段，才沒做兩個項(xiàng)目
有不足的地方請大家見諒和指導(dǎo)
歡迎大家討論

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/100111.html

相關(guān)文章

  • Vue2 利用 v-model 實(shí)現(xiàn)組件props雙向綁定的優(yōu)美解決方案

    摘要：在項(xiàng)目中開始使用來構(gòu)建項(xiàng)目了，跟很大的一處不同在于取消了的雙向綁定，改成只能從父級傳到子級的單向數(shù)據(jù)流，初衷當(dāng)然是好的，為了避免雙向綁定在項(xiàng)目中容易造成的數(shù)據(jù)混亂。能不能不寫來實(shí)現(xiàn)的雙向綁定呢，答案是可以的。 在項(xiàng)目中開始使用vue2來構(gòu)建項(xiàng)目了，跟 vue1 很大的一處不同在于2 取消了props 的雙向綁定，改成只能從父級傳到子級的單向數(shù)據(jù)流，初衷當(dāng)然是好的，為了避免雙向綁定在項(xiàng)目...

    SimonMa 評論0 收藏0

  • Vue雙向綁定原理，教你一步一步實(shí)現(xiàn)雙向綁定

    摘要：儲存訂閱器因?yàn)閷傩员槐O(jiān)聽，這一步會執(zhí)行監(jiān)聽器里的方法這一步我們把也給弄了出來，到這一步我們已經(jīng)實(shí)現(xiàn)了一個簡單的雙向綁定了，我們可以嘗試把兩者結(jié)合起來看下效果?？偨Y(jié)本文主要是對雙向綁定原理的學(xué)習(xí)與實(shí)現(xiàn)。 當(dāng)今前端天下以 Angular、React、vue 三足鼎立的局面，你不選擇一個陣營基本上無法立足于前端，甚至是兩個或者三個陣營都要選擇，大勢所趨。 所以我們要時刻保持好奇心，擁抱變化，...

    Labradors 評論0 收藏0

  • 前端MVVM模式及其在Vue和React中的體現(xiàn)

    摘要：在模式中一般把層算在層中，只有在理想的雙向綁定模式下，才會完全的消失。層將通過特定的展示出來，并在控件上綁定視圖交互事件，一般由框架自動生成在瀏覽器中。三大框架的異同三大框架都是數(shù)據(jù)驅(qū)動型的框架及是雙向數(shù)據(jù)綁定是單向數(shù)據(jù)綁定。 MVVM相關(guān)概念 1） MVVM典型特點(diǎn)是有四個概念：Model、View、ViewModel、綁定器。MVVM可以是單向綁定也可以是雙向綁定甚至是不綁...

    沈建明 評論0 收藏0

  • vue中props的雙向綁定

    摘要：在的學(xué)習(xí)中，一開始我是自己寫組件練手的，在這個過程中我遇到一個問題父組件傳遞給子組件參數(shù)直接在子組件里直接使用是可以實(shí)時更新的如果在，等聲明或者直接賦值給的時候，再用的時候是不可以實(shí)時更新的內(nèi)部的是可以實(shí)時更新的但是內(nèi)部不可以強(qiáng)制去改變父元 在vue的學(xué)習(xí)中，一開始我是自己寫組件練手的，在這個過程中我遇到一個問題：props：父組件傳遞給子組件參數(shù)（1）props直接在子組件里直接使用...

    vvpale 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<