子元件傳遞資料 使用者已經登入
父元件接收資料 並顯示列表，未登入不顯示列表
/*有兩個元件，分別是main-component,header-component.
main-component是由header-component和乙個列表（有5條資料 [100,200,300,400,500]），
header-component是由乙個h1的標籤：'這是頁頭',有乙個資料isuserlogin:true
在渲染main-component時候，讀取header-component在掛載完畢之後通過事件傳遞來的資料（isuserlogin），根據該資料的真假來決定列表是否顯示.
this.$emit('myevent',myphone)
*/
doctype html
>
<
html
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>子與父通訊
title
>
<
script
src="js/vue.js"
>
script
>
head
>
<
body
>
<
div
id="container"
>
<
p>}
p>
<
main-component
>
main-component
>
div>
<
script
>
//建立父元件
vue.component(
"main-component",
},methods:
},template:`
<
div>
<
header
-component @checkuserlogin="
recvmsg
"><
/header-component>
<
ul v-if
="isuserlogin
">
<
li v
-for="
tmp in mylist
">
}<
/li>
<
/ul>
<
/div>`
})
//建立子元件
vue.component(
"header-component",
},//通過$emit在掛載完成後把使用者已經登入的值發傳遞給父元件
mounted:
function
(), template:`
<
div>
<
h1>
這是頁頭
<
/h1>
<
/div>
` })
//new乙個vue例項
newvue(
})script
>
body
>
html
>
Vue 父子元件間的通訊
前言在 vue 專案中父子元件的通訊是非常常見的，最近做專案的時候發現對這方面的知識還不怎麼熟練，在這邊做一下筆記，系統學習一下吧。父元件傳值給子元件，這個就比較常見了，直接用 props 就可以了。但是就算是 props 子元件那邊也有三種寫法，如下面 所示 父元件 子元件 1 簡單粗暴就給個名稱...
vue元件父子間通訊02
三 元件間通訊 parent refs 父元件要想獲取子元件的資料 在呼叫子元件的時候，指定ref屬性 根據指定的引用的名字 找到子元件的例項物件 this.refs.myson 子元件要想獲取父元件的資料 直接讀取 this.parent 通過this.refs拿到子元件的資料 doctype h...
Vue 父子元件間的通訊
前言在 vue 專案中父子元件的通訊是非常常見的，最近做專案的時候發現對這方面的知識還不怎麼熟練，在這邊做一下筆記，系統學習一下吧。父元件傳值給子元件，這個就比較常見了，直接用 props 就可以了。但是就算是 props 子元件那邊也有三種寫法，如下面 所示 父元件 子元件 1 簡單粗暴就給個名稱...