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="zhangsan">
son>
div>
script>
type="text/x-template"
id="sontpl">
這是子元件h2>
}div>
script>
vue.component('parent',)
vue.component('son',)
new vue(
})script>
body>
html>

lang="zh-cn">
charset="utf-8">
src="js/vue.js">
script>
title>
head>
id="example">
parent>
div>
type="text/x-template"
id="parenttpl">
父元件h1>
son>
div>
script>
type="text/x-template"
id="sontpl">
子元件h2>
type="text"
v-model="mymsg"/>
發給父元件button>
div>
script>
vue.component('parent',}})
vue.component('son',
},methods:}})
new vue(
})script>
body>
html>

rent

, refs完成父子元件間通訊

**如下:

lang="zh-cn">
charset="utf-8">
src="js/vue.js">
script>
title>
head>
id="example">
parent>
div>
type="text/x-template"
id="parenttpl">
這是父元件h1>
獲取子元件的資料button>
ref="myson">
son>
div>
script>
type="text/x-template"
id="sontpl">
這是子元件h2>
獲取父元件的資料button>
div>
script>
vue.component('parent',
},methods:}})
vue.component('son',
},methods:
},template:'#sontpl'
})script>
new vue(
})script>
body>
html>

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

vue父子元件通訊

父元件 在父元件data 中定義需要傳送的資料 屬性名隨意 export default 子元件 在子元件export default 中定義需要傳送的資料，放在props裡面，data1 data2名字隨意，可不對應 export default data2 data 父元件向子元件傳值 這 da...