子元件中設定props屬性，去接收父元件資料。為什麼要設定屬性去接收？因為v-bind指令就是動態的給值，v-bind:子元件屬性變數=「父元件存放資料變數」。
子元件￥emit發射事件，並且攜帶引數一起發射。父元件在外部用v-on接收傳送的事件和傳出的值。
下面是乙個示例，大概是父元件把number1、number2的資料傳給子元件。在子元件prop中用dnumber1、dnumber2去接收，然後用data裡面retrun的cnumber1、cnumber2儲存資料。子元件中有2個input輸入框，分別繫結cnumber1、cnumber2，實現響應式互動，然後新輸入的資料cnumber1、cnumber1，又傳給父元件，父元件用number1、number2去接收。
雖然感覺繞了一點，但是理清後發現父子通訊也就這樣不太難。
<
!doctype html>
"en"
>
"utf-8"
>
title<
/title>
"../vue.js"
>
<
/script>
<
/head>
>
"number1"
:dnumber2=
"number2" @item-click1=
"changenumber1" @item-click2=
"changenumber2"
>
<
/cpn>
父元件資料<
/h1>
<
!-- vue例項裡面的資料--
>
}<
/h1>
}<
/h1>
<
/div>
<
/body>
"my-cpn"
>
父傳給子的資料<
/h1>
<
!-- 父傳給子的資料（vue傳給cpn的資料）,存放在props裡面的資料--
>
}<
/h1>
}<
/h1>
cpn data裡面的資料<
/h1>
<
!-- cpn data裡面的資料--
>
}<
/h1>
"text"
:value=
"cnumber1" @input=
"changeinput1"
>
}<
/h1>
"text"
:value=
"cnumber2" @input=
"changeinput2"
>
<
/div>
<
/template>
const cpn =
,data()
},methods:
,changeinput2
(event)},
} vue.
component
("cpn"
,cpn)
;new
vue(
, methods:
,changenumber2
(e)}})
<
/script>
<
/html>
上面示例是將v-model才分成v-bind和v-on做的，v-model也能直接用，涉及的vue中的另乙個實現watch觀察者
下面是用watch做的，**簡單很多：
<
!doctype html>
"en"
>
"utf-8"
>
title<
/title>
"../vue.js"
>
<
/script>
<
/head>
>
"number1"
:dnumber2=
"number2" @item-click1=
"changenumber1" @item-click2=
"changenumber2"
>
<
/cpn>
父元件資料<
/h1>
<
!-- vue例項裡面的資料--
>
}<
/h1>
}<
/h1>
<
/div>
<
/body>
"my-cpn"
>
父傳給子的資料<
/h1>
<
!-- 父傳給子的資料（vue傳給cpn的資料）,存放在props裡面的資料--
>
}<
/h1>
}<
/h1>
cpn data裡面的資料<
/h1>
<
!-- cpn data裡面的資料--
>
}<
/h1>
"text" v-model=
"cnumber1"
>
}<
/h1>
"text" v-model=
"cnumber2"
>
<
/div>
<
/template>
const cpn =
,data()
},watch:
,cnumber2
(newvalue),}
,// methods: ,
// changeinput2(event)
// },
} vue.
component
("cpn"
,cpn)
;new
vue(
, methods:
,changenumber2
(e)}})
<
/script>
<
/html>
vue8種通訊方式
參考 寫的很詳細 vue.js實戰 本人實際操作 我這邊籠統說一下 1.props emit 概念 父元件通過props的方式向子元件傳遞資料，而通過 emit子元件可以向父元件通訊。2.children parent 概念 通過 parent和 children就可以訪問元件的例項。使用 this...
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對事件進行監聽，實現引數的傳遞...