Vue中父子元件通訊 元件todolist

>提交

button

>

div>

<

ul>

<

li v-for

="(item, index ) of list"

:key

="index"

>}

li>

ul>

div>

<

script

>

newvue(,

methods:}})

script

>

view code

定義元件，元件和元件之間通訊

<

div 
id="root"
>
<
div>
<
input 
type
="text"
v-model
="inputvalue"
>
<
button 
@click
="handlesubmit"
>提交
button
>
div>
<
ul>
<
todo-item
>
todo-item
>
ul>
div>
<
script
>
vue.component(
'todo-item',)
...

>提交

button

>

div>

<

ul>

<

todo-item

>

todo-item

>

ul>

div>

<

script

>

//全域性元件

'todo-item',)

vartodoitem

=

newvue(,

data:,

methods:}})

script

>

body

>

html

>

view code

父元件向子元件傳值是通過屬性的形式。

<

div 
id="root"
>
<
div>
<
input 
type
="text"
v-model
="inputvalue"
>
<
button 
@click
="handlesubmit"
>提交
button
>
div>
<
ul>
<
todo-item 
v-for
="(item ,index) of list"
:key
="index"
:content
="item"
>
todo-item
>
ul>
div>
<
script
>
vue.component(
'todo-item',}
'})newvue(,
methods:}})
script
>

vue.component是元件

每乙個vue元件又是乙個vue的例項。

任何乙個vue專案都是由千千萬萬個vue例項組成的。

每個vue例項就是乙個元件，每個元件也是vue的例項。 

子元件通過發布訂閱模式通知父元件。 

<

div 
id="root"
>
<
div>
<
input 
type
="text"
v-model
="inputvalue"
>
<
button 
@click
="handlesubmit"
>提交
button
>
div>
<
ul>
<
todo-item 
v-for
="(item ,index) of list"
:key
="index"
:content
="item"
:index
="index"
@delete
='handledelete'
>
todo-item
>
ul>
div>
<
script
>
vue.component(
'todo-item',}
',methods:}})
newvue(,
methods:,
handledelete:
function
(index)}})
script
>

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...