元件通訊的幾種方式

在父元件的子元件標籤上，繫結屬性，將傳遞引數作為屬性值

<

father>
<
son 
:money 
= 'money' 
/>

father
>

在子元件的props屬性中，宣告從父元件傳來的值

props:['money']

如果想要對傳來的引數進行驗證，有兩種方式

驗證引數型別:

props:

驗證引數大小：

props:

}}

為子元件繫結自定義事件，在自定義事件中通過$emit呼叫標籤上繫結的事件

子元件中：

發紅包

give()

父元件：

> 

hide(val)

使用ref

假設father為父元件，son和girl為子元件，girl要更改son中的值

首先為父元件中的son標籤繫結ref

在son元件中定義更改資料的方法 changeflag

changeflag()

在父元件中定義fn函式，其中this.ref.son就可以獲取son元件

fn()

父元件再將fn方法當做屬性繫結給gir元件

<

father
>
<
girl 
:beat
='fn'
/>
father
>

在girl元件中通props接收，並呼叫

props:['fn']

methods: 
}

使用事件匯流排

建立乙個vue物件，其中包含$on方法定義事件，$emit方法觸發事件

var bus = new vue()

在需要繫結事件的元件的mounted生命週期函式中繫結事件

mounted()

在需要呼叫的元件中觸發

bus.$emit('hite')

資料都儲存在store中，通過this.$store.state.屬性名呼叫屬性，this.$store.commit(方法名,[引數])呼叫方法。

只能通過mutation中的方法更改state中的資料

vue元件間通訊的幾種方式

方法一 props emit 1 父元件向子元件傳值 父元件中通過v bind繫結需要給子元件傳遞的值，子元件中通過props拿到父元件傳遞的值 username 前者自定義名稱便於子元件呼叫，後者要傳遞資料名 div template import child from components ch...

vue元件間的幾種通訊方式

1.父 往 子元件上傳遞 props 父元件上寫 子元件上使用 props接收 在vue例項中加上 1.props 2.props parent 2.子 往父親上傳遞 emit 父元件 1.2.在 methods 子元件 1.觸發父元件上的那個child事件 可以在created鉤子函式中定義 th...

vue元件的幾種通訊

props和 emit 常用 vue.component child template props message 設定props屬性值，得到父元件傳遞過來的資料 methods vue.component parent methods 有父元件parent和子元件child 1 父元件傳遞了mes...