子组件传递给父组件数据
Posted kukai
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了子组件传递给父组件数据相关的知识，希望对你有一定的参考价值。
来自书籍《vue.js实战》
子组件使用$emit()触发事件,父组件用v-on来监听子组件事件
$emit(‘自定义事件名‘,传给父组件的数据)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
</head>
<body>
<div id="app">
<p>总数:{{total}}</p>
<my-component @increase1="handleGetTotal" @reduce="handleGetTotal"></my-component>
</div>
<script>
Vue.component(‘my-component‘,{
template:‘
<div>
<button @click="handleIncrease">+1</button>
<button @click="handleReduce">-1</button>
</div>‘,
data:function(){
return {
counter:0
}
},
methods:{
handleIncrease:function(){
this.counter++;
this.$emit(‘increase1‘,this.counter);
},
handleReduce:function(){
this.counter--;
this.$emit(‘reduce‘,this.counter);
}
}
}
);
var v=new Vue({
el:"#app",
data:{
total:0
},
methods:{
handleGetTotal:function(total){
this.total=total
}
}
});
</script>
</body>
</html>
以上是关于子组件传递给父组件数据的主要内容，如果未能解决你的问题，请参考以下文章
父组件访问子组件中的数据（父子组件通信案例：父组件访问子组件$refs[‘子组件‘]，子组件传递数据给父组件（父组件中使用v-model））