二、元件間通訊（子元件傳值給父元件）
通過事件的方式來完成資料的傳輸。
①在父元件中 定義乙個方法，用來接收子元件所通過事件傳來的值
methods:
}②繫結事件處理函式
事件一般情況 都是自定義事件
③在子元件觸發事件
事件名，值
this.$emit('myevent',myphone)
//觸發乙個叫做myevent的事件，同時把第二個引數資料傳遞給事件對應的處理函式
總結：在 vue 中，父子元件的關係可以總結為props down, events up。父元件通過 props 向下傳遞資料給子元件，子元件通過 events 給父元件傳送訊息。
doctype html
>
<
html
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>元件間通訊子傳父
title
>
<
script
src="js/vue.js"
>
script
>
head
>
<
body
>
<
div
id="container"
>
<
p>}
p>
<
parent-component
>
parent-component
>
div>
<
script
>
//通過事件的方式傳遞
//繫結 -- 觸發
vue.component(
"parent-component",
},methods:
},template:`
<
div>
<
h1>
這是父元件
<
/h1>
<
p>
子元件傳來的資料為：}
<
/p>
>
<
child
-component @customevent="
recvmsg
"><
/child-component>
<
/div>
` })
vue.component(
"child-component",,
},template:`
<
div>
<
h1>
這是子元件
<
/h1>
<
button @click="
sendmsg
">
sentofather
<
/button>
<
/div>
` })
newvue(
})script
>
body
>
html
>
:::在子元件中 放上乙個input，點選按鈕 把使用者輸入的內容發給父元件
"container
">
}
VUE 父元件子元件間通訊
父元件給子元件傳參，子元件通過prop屬性進行接收 簡單搭建元件部分如下，其中父元素身上有兩個資料，分別是字元型資料1，json型資料2 子元件分別從父元件獲取這兩個資料並展示，其次子元件有自己的資料 子元件通過 emit 事件想父元件發射資料 頁面結構 其中child a為子元件 這是父元件 父元...
Vue元件間的通訊 子傳父
實現方法 子元件向父元件中傳遞訊息通過自定義事件。即子元件通過在自身的事件執行方法中使用this.emit 自定義事件名稱 需要傳遞的內容 這個方法,在元件使用時監聽自定義事件,從而在父元件中處理自定義事件的帶引數的執行方法來進行資訊傳遞。通訊步驟 1 子元件自身觸發事件,在這個事件執行方法中通過呼...
vue 子元件與父元件的通訊
子元件調父元件的方法 在子元件中通過this.parent.event通過 emit觸發乙個事件，父元件監聽這個事件 通過prop傳入父元件的方法 父元件 home.vue 子元件 helloworld.vue 通過 this.parent.event 呼叫父元件的方法 通過 emit 觸發乙個事件...