學習了一天的vue元件化開發,腦瓜子嗡嗡的。遇事不要慌，先去吃個快餐。吃飽才有力氣扯淡，程式設計師還是應該以身體為重。鄙人健身三年，有喜歡運動的小夥伴歡迎私聊深入交流一下。
1.子元件可以獲取父元件的data資料
2.子元件中的輸入框可以修改獲取到的data資料
3.子元件在修改獲取到的資料同時反過來改變父元件的data資料
1.首先子元件獲取父元件的data資料相信大家一定不陌生，只需要通過props自定義屬性即可。(prop 是子元件用來接受父元件傳遞過來的資料的乙個自定義屬性。父元件的資料需要通過 props 把資料傳給子元件，子元件需要顯式地用 props 選項宣告 「prop」)
>
"num1"
:number2=
"num2"
>
<
/cpn>
<
/div>
"cpn"
>
}<
/h2>
}<
/h2>
<
/div>
<
/template>
var vm =
newvue(,
components:,}
}});
<
/script>
<
/body>很簡單的操作 輸出成功：
2.接下來 我們要通過input輸入框改變props中獲取的資料內容，很多人會想到通過v-model實現資料雙向繫結。那麼可行嗎？可行，但是會有一點小問題。
修改template標籤內容 通過v-model繫結number1和number2
"cpn"
>
}<
/h2>
"text" v-model=
"number1"
>
}<
/h2>
"text" v-model=
"number2"
>
<
/div>
<
/template>
components:
,data()}}}
}<
/h2>
}<
/h2>
"text" v-model=
"dnumber1"
>
}<
/h2>
}<
/h2>
"text" v-model=
"dnumber2"
>
<
/div>3.最後我們想要通過input改變父元件中的data，首先奉上完整**
<
!doctype html>
"zh-cn"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
"x-ua-compatible" content=
"ie=edge"
>
document<
/title>
Vue父子元件通訊
1.父與子通訊，通過屬性傳遞值，如下 lang zh cn charset utf 8 src js vue.js script title head id example p parent div type text x template id parenttpl 這是父元件h1 name zha...
vue父子元件通訊
一 父元件利用props往子元件傳輸資料 父元件 注意傳遞引數時要用 代替駝峰命名，html不區分大小寫 子元件 vue.component child template 二 子元件向父元件傳遞引數利用事件機制 子元件通過this.emit 派發事件，父元件利用v on對事件進行監聽，實現引數的傳遞...
Vue父子元件通訊
抓住幾個語義特點就可以了。子元件要接收父元件傳過來的內容，需要引入props，也就是說有props就是子元件 以下是子元件的內容 p div template export default script 父元件需要往子元件傳入引數，則某個部分要和引數post對應，即 v bind post post...