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...