子组件传递信息给父组件
一 概念
- 通过发送事件请求的方式进行数据传递
```html
<div id="app">
<global-tag @send_action='receiveAction'></global-tag>
</div>
<script type="text/javascript">
Vue.component('global-tag', {
data () {
return {
sub_data1: "数据1",
sub_data2: '数据2'
}
},
template: '<div @click="clickAction">发生</div>',
methods: {
clickAction () {
this.$emit('send_action', this.sub_data1, this.sub_data2)
}
}
})
new Vue({
el: '#app',
methods: {
receiveAction (v1, v2) {
console.log(v1, v2)
}
}
})
</script>
```二 代码示范
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>子传父</title>
</head>
<body>
<div id="app">
<global-tag @send_data="receive_data"></global-tag>
{{ n }}
</div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
// 子传父:
// 通过发生事件的方式进行数据传输
// 数据由子组件提供, 父组件通过事件的回调方法获取数据
// 发生数据的关键: $emit("事件名", ...args)
Vue.component("global-tag", {
template: "<div @click='divAction'>我是div</div>",
data () {
return {
num: 10,
arrList: [1, 2, 3, 4, 5]
}
},
methods: {
divAction () {
// 发生事件
// console.log("要发生事件,携带参数了");
this.$emit("send_data", this.num, this.arrList)
}
}
});
new Vue({
el: "#app",
data: {
n: 0
},
methods: {
receive_data (num, arrList) {
console.log("接收到的数据:", num, arrList);
this.n = num;
}
}
})
</script>
</html>
