vue子元件改變父元件的值

2022-07-01 04:03:16 字數 1365 閱讀 2068

1、父元件傳值給子元件,首先在父元件宣告值。

2、引用子元件的時候將值用屬性的方式傳遞給子元件。

3、子元件用props接收來自父元件的值 。 

4、子元件可以直接使用接收到的值。

5、如果子元件要修改來自父元件的值,不能直接修改,要通過事件進行修改

首先子元件中點選事件繫結方法,

方法呼叫$emit()事件,通過這個方法傳送請求給父元件,

同時這個方法有兩個引數,第乙個是方法名(此方法名在父元件中用到)。第二個是父元件中方法的引數。

父元件繫結方法接收這個請求。(繫結的方法要和子元件傳來的方法一樣,即父元件中@後面的方法要個子元件中$emit()中的第乙個引數一樣)

同時在methods中定義這個方法,方法體中做資料處理。

6、因為vue是雙向資料繫結,因此資料更新的時候頁面上也會即時進行更新

7、本文中給出案例是每點選一次按鈕數字+1,按鈕在子元件中,數字初始化在父元件中,數字在父子元件中都有展示

**如下

父元件**

:data="data"@changecomponent1data="component1datachange"

>

子元件**

button

type="primary"@click="changedata"

>點我改變父元件的值

效果圖如下

子元件改變父元件的值

子元件改變父元件的值,會報錯。其實是採用單向資料流,子元件不能直接改變父元件的值,是以單向資料流的方式流轉資料。可以採用以下兩種減少 量的方式改變父元件的值 忽略on和emit事件方式 方法一 xx.sync 和 emit update xx vue.component child button 1...

vue子元件修改父元件的值

最常用的一種方法,父元件通過v on繫結乙個事件,在事件中修改自己的值,子元件通過 emit觸發該事件 在子元件mobilemessage中 這種方法有個好處就是可以在父元件的事件裡面做一些額外的處理,但是如果單純的賦值,這個有點繁瑣了。父元件通過.sync識別符號表明prop的雙向繫結,sync是...

vue 子元件修改父元件的值

如何在子元件中修改父元件的值 第一步 首先得保證父元件中有值吧 這是usermanage.vue data 第二步 在父元件中引用子元件import form from usercreate 第三步 父元件中註冊子元件並引用 template export default,data script 第...