vue中修改props傳進來的值

2021-10-02 09:47:47 字數 660 閱讀 9181

總所周知,vue是單向資料流,一般我們也不會在子元件裡面修改父元件傳進來的值,但總有需要修改的時候。

前段時間乙個專案中有遇到上述情況,假設我直接傳進來乙個list, 當時我直接在裡面改了list,但是卻驚訝的發現沒有報錯,以前好像有遇到直接修改丟擲錯誤的,但這次卻沒有,當時也沒有多想,最近空閒下來又想了下,發現自己確實**了(此處省略兩字^_^)。原因如下:

因為我傳進來的list是個陣列,屬於引用型別,修改子元件相當於把父元件也同時修改了,所以沒有報錯,如果是個基本型別的資料直接修改那麼vue會報錯。

在子元件修改props的方法:

1. 子元件data中拷貝乙份,注意引用型別需要深拷貝,根據需求可以watch監聽 

data() 

},watch:

}

2.  通過計算屬性修改

computed: )

}}

3. 通過研究大佬們的寫法又發現了一種修改方式: sync修飾符

父元件 穿進去的時候加上 .sync

子元件 通過this.$emit('update:***', params)

// 父元件

// 子元件

methodname(index)

vue中修改props傳進來的值

眾所周知,vue是單向資料流,一般我們也不會在子元件裡面修改父元件傳進來的值,但總有需要修改的時候。前段時間乙個專案中有遇到上述情況,假設我直接傳進來乙個list,當時我直接在裡面改了list,但是卻驚訝的發現沒有報錯,以前好像有遇到直接修改丟擲錯誤的,但這次卻沒有,當時也沒有多想,最近空閒下來又想...

props寫法 Vue中props的用法知識點

vue中props的詳解 看一下官方文件 元件例項的作用域是孤立的。這意味著不能 也不應該 在子元件的模板內直接引用父元件的資料。父元件的資料需要通過 prop 才能下發到子元件中。也就是props是子元件訪問父元件資料的唯一介面。詳細一點解釋就是 乙個元件可以直接在模板裡面渲染data裡面的資料 ...

vue中的props物件

1.props物件的定義 props其實是properties的縮寫,props物件是用來定義屬性的。props物件可以接受陣列形式的引數又或者是物件形式的引數。陣列形式 props title likes ispublished commentids author 物件形式 在物件形式中,可以指定...