vue组件之子组件向父组件传值完成数量控制器
本章作业——利用父子组件的传值完成数量控制器的功能需求:单击“增加1”按钮的时候,对应数量会增加1。单击“减少1”按钮的时候,对应数量会减少1。项目运行的页面效果如图所示:实现过程:父组件示例代码(App.vue):<template><div id="app"><p>{{total}}</p><!-- 第三步:调用组件 --><C
·
本章作业——利用父子组件的传值完成数量控制器的功能
需求:
- 单击“增加1”按钮的时候,对应数量会增加1。
- 单击“减少1”按钮的时候,对应数量会减少1。
项目运行的页面效果如图所示:
实现过程:
父组件示例代码(App.vue):
<template>
<div id="app">
<p>{{total}}</p>
<!-- 第三步:调用组件 -->
<Counter @father_add="getTotal" @father_reduce="getTotal"></Counter>
</div>
</template>
<script>
// 第一步:引入子组件Counter
import Counter from './components/Counter.vue'
export default {
name: 'App',
data(){
return{
total:0
}
},
methods:{
getTotal(val){
this.total=val
}
},
// 第二步:注册组件
components:{Counter}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
子组件使用$emit方法向父组件传递数据,子组件列表项目代码(Counter.vue):
语法:this.$emit('event',val)
<template>
<div>
<button @click="add()">增加1</button>
<button @click="reduce()">减少1</button>
</div>
</template>
<script>
export default {
name:'Counter',
data(){
return{
sum:0
}
},
methods:{
add(){
this.sum=this.sum+1;
this.$emit("father_add",this.sum);
},
reduce(){
this.sum=this.sum-1;
this.$emit("father_reduce",this.sum)
}
}
}
</script>
注意:子组件传值给父组件的时候,事件触发及接收的原则是:谁触发的监听谁接收。
更多推荐
已为社区贡献6条内容
所有评论(0)