效果图:
- 改变前
- 改变后
方式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技术实现,未完待续。。。。。。