#yyds干货盘点#16.父子组件事件通信
一、父子组件间通信组件之间必然需要相互通信：
[*]父组件可能要给子组件下发数据
[*]子组件则可能要将它内部发生的动态行为告知父组件
[*]非父子组件之间也可能会有数据和行为的通信
<!-- 父组件向子组件传递数据-->
<my-component :items="users"></my-component>Vue.component('my-component', {
template: `
<div><button @click="myclick">单击以触发父元素更新</button></div>
`,
methods: {
myclick: function(){
}
}
});
[*]父元素通过 props 向子组件传递数据
[*]子组件通过 事件 给父组件触发更新行为
二、父子组件间事件通信
子组件向父组件发送消息，使用Vue自定义事件机制
[*]子组件使用 $emit 向父组件触发事件
[*]父组件使用 $on 或 v-on 监听子组件事件
Vue.component('my-component', {
template: '#my-component',
props: ['value'],
methods: {
emitEvent: function(){
console.log('child component click event');
this.$emit('childevent');
}
}
});<div id="app">
<my-component @childevent="handleEvent"></my-component>
</div>
[*]子组件向父组件发送事件消息时，可以一并传递其它附加数据
[*]父组件直接在事件监听函数中通过形参获取这些附加数据参数（也可以使用 arguments [ ] 数组接收）
emitEvent: function() {
this.$emit('childevent', '附加数据')
}handleEvent: function() {
console.log(arguments);
}
三、父子组件间通信（HTML代码）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>父子组件间通信</title>
</head>
<body>
<div id="app">
<!-- 使用组件 -->
<my-component :message="message" @my-component-event="handleMyComponentEvent"></my-component>
<h6>父元素内容</h6>
<p>message=={{message}}</p>
</div>
<template id="my">
<div>
<p>message={{message}}</p>
<p>
<button @click="handleClick">点击以更新父元素</button>
</p>
</div>
</template>
<script src="vue.js"></script>
<script>
//创建组件
const myComponent = {
template: '#my',
//props接收父元素数据
props: ['message'],
//方法
methods: {
handleClick:function(){
//向父元素发射事件消息
//参数1：表示自定义事件的名称
//自定义事件的名称要使用短横线连接形式
//参数2：表示传递给父元素附加数据
this.$emit('my-component-event','update message from child');
}
}
}
//Vue实例对象
var vm = new Vue({
el: '#app',
data: {
message : 'from parent'
},
//注册组件
components: {
myComponent
},
//父元素methods
methods: {
//接收到子组件的自定义事件并处理之
handleMyComponentEvent: function(param){
console.log('接收到了子组件触发的事件');
//this.message = param;
this.message=arguments;
}
}
});
</script>
</body>
</html>注：一定要引入Vue.js点击链接下载开发版或生产版本在html中引入即可
https://blog.51cto.com/u_15173612/4848005
页:
[1]