vue父子元件通訊

父元件

在父元件data()中定義需要傳送的資料（屬性名隨意）

export default

}}

在子元件export default{}中定義需要傳送的資料，放在props裡面，data1、data2名字隨意，可不對應

export default

, data2:,}
data()
}}

這:data1代表的的子元件，字串的data1對應父元件，：data1='data1』表示子元件屬性為data1指向父元件的data1(父元件屬性可以不是data1，可以隨便定義)

'data1'
:data2=
'data2'
>
<
/son>
<
/div>
<
/template>

子元件(在某個方法裡面直接用this.$emit())

export default

, data2:,}
data()
},methods:
}}

'data1'
:data2=
'data2'
@clickokbtn
='clickon'
>
<
/son>
<
/div>
<
/template>
export default},
methods:}}
<
/script>

如果需要向子元件傳頁面，如子元件定義乙個自己的dialog樣式，但是內容不知道，需要父元件傳遞，這時將使用作用域插槽

父元件

'data1'
:data2=
'data2'
@clickokbtn
='clickon'
>
"body"
>
這是父元件寫的東西，將對應到子元件的div裡面<
/span>
<
/div>
<
/son>
<
/div>
<
/template>

:title=
"dialogname"
:close-on-click-modal=
"false"
:visible.sync=
"dialo**isible"
>
"body"
>
<
/slot>
<
/div>
<
/dialog>
<
/div>
<
/template>

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