跨组件传值,点击购物车(goodsshows)改变底部购物(App)车徽章数字

  • 核心内容
goodsshows和App没有父子和跳转关系,怎么传递数值呢
1.定义一个sendparams.js
// 负责产生一个vm对象并且导出
import Vue from 'vue';
export var vm = new Vue();
export const KEY = 'sendparmas'
2.实现方法
保证goodsshow.vue中的调用 vm.$emit()的对象vm要和App.vue中的vm是同一个
 - 在goodsshow.vue中发送数据:vm.$emit(key,value)
import {vm,KEY} from '../../kits/sendparams.js'
vm.$emit("send",1)
 - 在App.vue中 vm.$on(key) 这样才能给实现跨组件传值
import {vm,KEY} from '../../kits/sendparams.js'
vm.$on("send",function(input){
  alert(input)----1
})
  • goodsshow.vue
// 3.0 加入购物车方法
            addShopCar(){
                // 1.0 获取商品id和选择的数量
                var  goodsid = this.goodsid;
                var selectedCount = this.count;

                // 2.0 将数据包装成要求的格式{goodsid:goodsid,count:selectedCount} 存储到localStorage中
                setItem({goodsid:goodsid,count:selectedCount});

                // 3.0 讲当前数据的数量发送给所有的注册者
                vm.$emit(KEY,selectedCount);

                // 4.0 显示小球
                this.isshow =!this.isshow;
            }
  • App.vue
      这里通过js代码来实现
    var count = 0;
    import {vm,KEY} from './kits/sendparams.js';

    vm.$on(KEY,function(input){
        // 将input数据叠加到count 
        count+=input;

        // 将count设置到span中
        document.getElementById('badge').innerText=count;
    });
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 10,455评论 0 29
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 6,646评论 0 6
  • 基本格式 以json的形式、将数据(支持所有格式)挂载在vue的data上、方法挂载在vue的methods上。 ...
    kirito_song阅读 4,235评论 0 21
  • 下载安装搭建环境 可以选npm安装,或者简单下载一个开发版的vue.js文件 浏览器打开加载有vue的文档时,控制...
    冥冥2017阅读 11,257评论 0 42
  • 记得好几年过生日,都被好朋友给忘记了这样子。虽然生日不算上什么,可是人生还是需要仪式感。就像是毕业有毕业典礼啊,结...
    雁一念阅读 1,371评论 0 1