基於VUE技術實現的父子元件之間的通訊
阿新 • • 發佈:2018-11-24
效果圖:
- 改變前
- 改變後
方式1: 父子元件之間的通訊:基於props及事件派發的方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>01-父子元件之間的通訊:基於props及事件派發的方式</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <p>父元件的內容:{{content}}</p> <me-button v-bind:name="name" v-on:change-parent-content="changeContentHandle"> </me-button> </div> <script type="text/javascript"> // 定義名為 me-button 的子元件 Vue.component('me-button', { props: { name: { type: String } }, template: '<button v-on:click="changeParentContentHandle">我是子元件的按鈕, 父元件傳遞給子元件的資料是: {{name}},點選我改變父元件的內容</button>', methods: { changeParentContentHandle: function() { this.$emit('change-parent-content', '內容被子元件改變了') } } }) // Vue初始化例項 new Vue({ el: '#app', data: { content: '我是父元件的內容', name: 'mj' }, methods: { changeContentHandle: function(value) { this.content = value } } }) </script> </body> </html>
方式2: 父子元件之間的通訊:基於props及元件的雙向資料繫結sync+update實現
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>02-父子元件之間的通訊:基於props及元件的雙向資料繫結sync+update實現</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <p>父元件的內容:{{content}}</p> <me-button v-bind:name="name" v-bind:content.sync="content"> </me-button> </div> <script type="text/javascript"> // 定義名為 me-button 的子元件 Vue.component('me-button', { props: { name: { type: String }, content: { type: String } }, template: '<button v-on:click="changeParentContentHandle">我是子元件的按鈕, 父元件傳遞給子元件的資料是: {{name}},點選我改變父元件的內容</button>', methods: { changeParentContentHandle: function() { this.$emit('update:content', '內容被子元件改變了') } } }) // Vue初始化例項 new Vue({ el: '#app', data: { content: '我是父元件的內容', name: 'mj' } }) </script> </body> </html>
方式3: 父子元件之間的通訊:基於props及元件的雙向資料繫結v-model實現
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>03-父子元件之間的通訊:基於props及元件的雙向資料繫結v-model實現</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <p>父元件的內容:{{content}}</p> <me-button v-bind:name="name" v-model="content"> </me-button> </div> <script type="text/javascript"> // 定義名為 me-button 的子元件 Vue.component('me-button', { props: { name: { type: String }, content: { type: String } }, template: '<button v-on:click="changeParentContentHandle">我是子元件的按鈕, 父元件傳遞給子元件的資料是: {{name}},點選我改變父元件的內容</button>', methods: { changeParentContentHandle: function() { this.$emit('input', '內容被子元件改變了') } } }) // Vue初始化例項 new Vue({ el: '#app', data: { content: '我是父元件的內容', name: 'mj' } }) </script> </body> </html>
方式4: 父子元件之間的通訊:基於props及EventBus自定義派發事件技術實現
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04-父子元件之間的通訊:基於props及EventBus自定義派發事件技術實現</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>父元件的內容:{{content}}</p>
<me-button
v-bind:name="name">
</me-button>
</div>
<script type="text/javascript">
// 定義名為 me-button 的子元件
Vue.component('me-button', {
props: {
name: {
type: String
}
},
template: '<button v-on:click="changeParentContentHandle">我是子元件的按鈕, 父元件傳遞給子元件的資料是: {{name}},點選我改變父元件的內容</button>',
methods: {
changeParentContentHandle: function() {
this.$eventBus.$emit('chang-parent-content', '內容被子元件改變了')
}
}
})
// eventBus作為Vue外掛
Vue.use({
install(Vue) {
Vue.prototype.$eventBus = new Vue;
}
})
// Vue初始化例項
new Vue({
el: '#app',
data: {
content: '我是父元件的內容',
name: 'mj'
},
created: function() {
this.$eventBus.$on('chang-parent-content', function(value) {
this.content = value
}.bind(this))
}
})
</script>
</body>
</html>
方式5: 基於Vuex技術實現,未完待續。。。。。。