vue單頁面父子傳遞

2022-03-09 09:38:23 字數 1268 閱讀 8432

觸發的自定義事件要放到註冊的元件上

1通過點選:

<

div

id>

<

div

v-text

="money"

@click

="reduce"

>

div>

<

child

:m="money"

@zdyclick

="add"

>

child

>

div>

<

template

id="tempchild"

>

<

div

@click

="changern"

>}

div>

template

>

需要三套名字:changern——子元件的事件方法名,zdyclick——父級html上的自定義事件名,橋接父子元件,在子元件方法裡觸發發布,在父級html裡使用,add——父元件的方法名,改變值

let child =

},methods:

}}let vm = new

vue(,

components:,

methods:,

reduce()

}})

2通過input輸入:

<

div

id>

}

<

child

:m="money"

@zdyclick

="gai"

>

child

>

div>

<

template

id="tempchild"

>

<

input

type

="text"

:value

="m"

@input

="changer"

>

input

>

template

>

let child =

},methods:

}}let vm = new

vue(,

components:,

methods:

}})

vue 父子元件傳遞

子元件接收父元件的資料可以使用props和bind進行 父元件 監聽子元件觸發的changehi事件,然後呼叫changehi方法 子元件 props cdata 接收父元件傳遞 父元件要監聽子元件的事件發生可以使用emit和on進行,子元件必須要觸發事件,然後父元件才可以接收到。子元件 metho...

Vue父子傳遞案例

實現功能 1 子元件的input輸入,改變父元件資訊 2 父元件對子元件1,3進行監聽與控制 3 子元件1與子元件3相互關聯 父子雙向通訊流程 子元件的input通過事件監聽 控制子元件的data中變數 向父元件 emit子事件及變數 父元件監聽到 emit事件及變數,賦予父元件的變數,通過prop...

vue父子元件傳遞引數

父元件 展示如下 子元件 展示如下 向父元件傳值 以上 展示即可實現父子元件的資料傳遞。有一種場景 父元件需要在頁面初始化時請求介面獲取資料,此時父元件中引入了子元件,需向子元件傳遞資料,而此時父元件還並沒有完成請求,因此傳遞給子元件的資料為空。解決方法如下 1 在子元件中使用watch監聽 wat...