Vue父子元件傳參和通訊

2021-09-29 11:38:06 字數 1748 閱讀 8674

vue父子元件之間通訊相對比較簡單,如果非父子間通訊則比較麻煩,可以考慮使用vuex。

缺點:父子元件高度依賴。

使用ref實現。

parent.vue

parent

"add()"

>child +

1<

/button>

"c">

<

/child>

<

/div>

<

/template>

import child from

'./child'

;export

default

, methods:}}

;<

/script>

child.vue

child:

}<

/div>

<

/template>

export

default}}

;<

/script>

使用v-bind實現。

parent.vue

parent:

}<

!--將自己暴露給child--

>

"this"

>

<

/child>

<

/div>

<

/template>

import child from

'./child'

;export

default

,data()

}};<

/script>

child.vue

child

"add()"

>parent +

1<

/button>

<

/div>

<

/template>

export

default}}

;<

/script>

parent.vue

parent

"add()"

>child +

1<

/button>

"c">

<

/child>

<

/div>

<

/template>

import child from

'./child'

;export

default

, methods:}}

;<

/script>

child.vue

child:

}<

/div>

<

/template>

export

default},

mounted()

);//只監聽一次

this

.$once

('addnum'

,(num)

=>);

}};<

/script>

元件可以選擇不接收事件,也不會報錯,降低了依賴。

vue父子元件傳參

一 首先,值肯定是定義在父元件中的,供所有子元件共享。所以要在父元件的data中定義值 二 其次,父元件要和子元件有契合點 就是在父元件中呼叫 註冊 引用子元件 呼叫 註冊 引用 這裡我繫結了兩個值,乙個是陣列,乙個是字串。2018 03 30 10 15 55 特別補充 總的來說父傳子就是這三個步...

VUE2 0父子元件以及非父子元件通訊傳參詳解

父元件資料如何傳遞給子元件呢?可以通過props屬性來實現 父元件 1 parent 2 child child msg msg child 這裡必須要用 代替駝峰 3parent 45 data 9 子元件通過props來接收資料 方式1 1 props childmsg 方式2 1 props ...

父子元件傳參

這個是父子傳參的乙個語法糖,官網上也有推薦,可以去看一下 一般父子傳參都會這麼寫 父 1 子 1 export default,12 13 1415 子元件可以接收來自父元件的modalvisible。子元件如果要修改modalvisible,可以在自己的data中定義乙個變數 tempmodalv...