请选择 进入手机版 | 继续访问电脑版

极客蜗牛

查看: 131|回复: 0

vue 组件之间通讯

[复制链接]

82

主题

99

帖子

651

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
651
QQ
发表于 2018-6-7 11:25:15 | 显示全部楼层 |阅读模式
父组件
  1. <template>
  2.     <div class="hello">
  3.         <h1>单价3元 总价:{{ price*num }}</h1>
  4.         <Num :num='num' v-on:add="addnum" v-on:cut="cutnum"></Num>
  5.         <!-- 将动态数据保存在子组件的 自定义属性中 -->
  6.         <!-- v-on:add="addnum" v-on:cut="cutnum"  为自定义事件 -->
  7.     </div>
  8. </template>
复制代码
  1. <script>
  2. import Num from './Num.vue';
  3. export default {
  4.   name: 'HelloWorld',
  5.   data () {
  6.     return {
  7.       num:5,
  8.       price:3.00,
  9.     }
  10.   },
  11.   methods:{
  12.     addnum(){    //此为自定义事件触发后执行的方法
  13.       this.num++;
  14.     },
  15.     cutnum(){    //此为自定义事件触发后执行的方法
  16.       this.num--;      
  17.     }
  18.   },
  19.   components:{
  20.     Num,
  21.   }
  22. }
  23. </script>
复制代码
子组件
  1. <template>
  2.     <div>
  3.         数量:{{num}}
  4.         <button @click="add">+</button>
  5.         <button @click="cut">-</button>
  6.     </div>
  7. </template>
  8. <script>
  9. export default {
  10.   name:'Num',
  11.   props:['num'],
  12.   data(){
  13.     return {
  14.       num:0,
  15.     }
  16.   },
  17.   methods:{
  18.     add(){
  19.       this.$emit('add')  //用  $emit  来触发父组件的自定义事件
复制代码



回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|极客蜗牛

GMT+8, 2018-11-19 07:43 , Processed in 0.051727 second(s), 24 queries .

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表