基于VUE技术实现的父子组件之间的通信

效果图：

改变前

改变后

方式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技术实现，未完待续。。。。。。

基于VUE技术实现的父子组件之间的通信

猜你喜欢