三、元件間通訊（$parent $refs）
父元件要想獲取子元件的資料：
①在呼叫子元件的時候，指定ref屬性
②根據指定的引用的名字 找到子元件的例項物件
this.$refs.myson
子元件要想獲取父元件的資料：
①直接讀取
this.$parent
：：：通過this.$refs拿到子元件的資料
doctype html
>
<
html
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>元件間通訊-01
title
>
<
script
src="js/vue.js"
>
script
>
head
>
<
body
>
<
div
id="container"
>
<
p>}
p>
<
dahua
>
dahua
>
div>
<
script
>
//vue提供的ref
vue.component(
"dahua",
},methods:
},template:`
<
div>
<
h1>
這是父元件
<
/h1>
<
button @click ="
getsonname
">
獲取子元件資料
<
/button>
<
span
>
}<
/span>
<
hr>
<
xiaohua ref="
myson
"><
/xiaohua>
<
/div>
` })
//建立子元件
vue.component(
"xiaohua",
},template:`
<
h1>
這是子元件
<
/h1>
` })
newvue(
})script
>
body
>
html
>
子元件通過$parent獲取父元件的資料
doctype html
>
<
html
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>元件間通訊-02
title
>
<
script
src="js/vue.js"
>
script
>
head
>
<
body
>
<
div
id="container"
>
<
p>}
p>
<
dahua
>
dahua
>
div>
<
script
>
//建立子元件
vue.component(
"dahua",
},template:`
<
div>
<
h1>
這是父元件
<
/h1>
<
hr>
<
xiaohua
><
/xiaohua>
<
/div>
` })
//建立子元件
vue.component(
"xiaohua",
},template:`
<
div>
<
h1>
這是子元件
<
/h1>
<
p>
}<
/p>
<
/div>
`, created:
function
() })
newvue(
})script
>
body
>
html
>
Vue 父子元件間的通訊
前言在 vue 專案中父子元件的通訊是非常常見的，最近做專案的時候發現對這方面的知識還不怎麼熟練，在這邊做一下筆記，系統學習一下吧。父元件傳值給子元件，這個就比較常見了，直接用 props 就可以了。但是就算是 props 子元件那邊也有三種寫法，如下面 所示 父元件 子元件 1 簡單粗暴就給個名稱...
Vue元件父子間通訊01
子元件傳遞資料 使用者已經登入 父元件接收資料 並顯示列表，未登入不顯示列表 有兩個元件，分別是main component,header component.main component是由header component和乙個列表 有5條資料 100,200,300,400,500 header...
Vue 父子元件間的通訊
前言在 vue 專案中父子元件的通訊是非常常見的，最近做專案的時候發現對這方面的知識還不怎麼熟練，在這邊做一下筆記，系統學習一下吧。父元件傳值給子元件，這個就比較常見了，直接用 props 就可以了。但是就算是 props 子元件那邊也有三種寫法，如下面 所示 父元件 子元件 1 簡單粗暴就給個名稱...