vue元件父子間通訊之綜合練習 假的聊天室

2022-03-16 10:40:22 字數 3512 閱讀 9772

doctype html

>

<

html

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>元件父子間通訊之綜合練習

title

>

<

script

src="js/vue.js"

>

script

>

head

>

<

body

>

<

div

id="container"

>

<

p>}

p>

<

chat-room

>

chat-room

>

div>

<

script

>

//建立父元件

vue.component(

"chat-room",

},template:`

<

div>

//假的聊天室

<

h1>

假的聊天室

<

/h1>

<

user

-component username="

rose

"><

/user-component>

<

user

-component username="

jack

"><

/user-component>

//顯示使用者的聊天資訊

<

ul>

<

li v

-for="

tmp in chatlist

">

}<

/li>

<

/ul>

<

/div>

` })

//建立子元件

vue.component(

"user-component",

},methods:

},template:`

<

div>

<

label

>

}<

/label>

<

input type="

text"v

-model="

userinput

"/>

<

button @click="

sendchat

">

傳送<

/button>

<

/div>

` })

newvue(

})script

>

body

>

html

>

元件間通訊綜合練習:

(props down,events up)

有2個元件:chat-room,user-component

user-component是由label input button構成

chat-room是由兩個user-component和乙個列表構成

①在chat-room呼叫user-component指定label的名字

②在user-component,

點選按鈕時,將當前使用者輸入的資訊傳送給chat-room元件,chat-room接收到資料顯示在列表中

doctype html

>

<

html

>

<

head

lang

="en"

>

<

meta

charset

="utf-8"

>

<

script

src="js/vue.js"

>

script

>

<

title

>

title

>

head

>

<

body

>

<

div

id="container"

>

<

chat-room

>

chat-room

>

div>

<

script

>

vue.component(

'chat-room',

},data:

function

() },

template:`

<

div>

<

h1>

假的聊天室

<

/h1>

<

ul>

<

li v

-for="

tmp in chatlist

">

}

<

/li>

<

/ul>

<

user

-component username="

lucy

"@sendtofather="

recvmsg

"><

/user-component>

<

user

-component username="

merry

"@sendtofather="

recvmsg

"><

/user-component>

<

/div>

` })

vue.component(

'user-component',

},methods:

},template:`

<

div>

<

label

>

}<

/label>

<

input type="

text"v

-model="

userinput

"/>

<

button @click="

sendtofather

">

傳送<

/button>

<

/div>

` })

newvue(

})script

>

body

>

html

>

Vue 父子元件間的通訊

前言在 vue 專案中父子元件的通訊是非常常見的,最近做專案的時候發現對這方面的知識還不怎麼熟練,在這邊做一下筆記,系統學習一下吧。父元件傳值給子元件,這個就比較常見了,直接用 props 就可以了。但是就算是 props 子元件那邊也有三種寫法,如下面 所示 父元件 子元件 1 簡單粗暴就給個名稱...

vue元件父子間通訊02

三 元件間通訊 parent refs 父元件要想獲取子元件的資料 在呼叫子元件的時候,指定ref屬性 根據指定的引用的名字 找到子元件的例項物件 this.refs.myson 子元件要想獲取父元件的資料 直接讀取 this.parent 通過this.refs拿到子元件的資料 doctype h...

Vue元件父子間通訊01

子元件傳遞資料 使用者已經登入 父元件接收資料 並顯示列表,未登入不顯示列表 有兩個元件,分別是main component,header component.main component是由header component和乙個列表 有5條資料 100,200,300,400,500 header...