Vue记录 this.$emit 子组件向父组件传递事件以及携带数据
在使用Vue 的组件的时候常常需要: 子组件 向父组件 传递 事件 以及 携带数据data,父组件 监听到来自子组件的事件 以及传递过来的 数据, 使用这些数据做相应的事情 ........一个Demo 就一目了然, 这里做个记录:<!DOCTYPE html><html lang="en">&
·
在使用Vue 的组件的时候常常需要: 子组件 向父组件 传递 事件 以及 携带数据data,
父组件 监听到来自子组件的事件 以及传递过来的 数据, 使用这些数据做相应的事情 ........
一个Demo 就一目了然, 这里做个记录:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>render</title>
<!-- 开发环境版本,包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="example">
<my-button @message="handleMessage"> </my-button>
</div>
<script>
Vue.component('my-button', {
template: `<div> <button @click="doSend"> Send </button> </div>`,
methods: {
doSend() {
this.$emit('message', '第一个参数', '第二个参数');
}
}
});
new Vue({
el: '#example',
data: {
messages: []
},
methods: {
handleMessage(p1, p2) {
console.log( p1 ); //'第一个参数'
console.log( p2 ); // '第二个参数' ,... 后续可以传递多个参数;
}
}
});
</script>
</body>
</html>\
这里自己踩过一个坑也做个记录:
在标签内 调用 methods:{ } 中的方法时候 是不能够加()的 一定是直接写方法名称即可, 否则传递的 参数数据无效;
更多推荐
已为社区贡献1条内容
所有评论(0)