使用 jQuery 读取 Vue 组件的数据

当问及jQuery如何与Vue组件通信的问题时,或许有人会嗤之以鼻:你都用了Vue了还用啥jQuery啊?仿佛有了Vue这把屠龙刀,就应该丢掉jQuery这把倚天剑,如此一来双手舞大刀才会更爽。鄙人认为,程序这东东不可与武器一并而论,用啥方便就用啥!

本文就简单探讨一下【使用jQuery读取Vue组件的数据】一种简单方法。

首先,在Laravel的blade模版中将数据库查询到的复杂对象$cartItems传递给Vue组件

<cart-items :items="{{$cartItems}}"></cart-items>

然后,利用Vue组件的便利,对这个复杂对象进行想要的加工处理(如:勾选或不勾选,选框禁用,标记已下架的状态,删除购物车某一项,求和计算等等)。这里使用Vue的原因是因为用Vue处理这些琐碎细节实在太方便了。加工处理的最终结果是得到一个叫做items的数组,类似于下面这样子:

items=[
    { "amount": 2, "sku_id": 25, "sku_price": "5765.00" }, 
    { "amount": 12, "sku_id": 29, "sku_price": "8789.00" } 
]

数组中的sku_price属性仅仅是方便Vue做求和计算特地引入的。后端程序可以通过sku_id查询到商品真实价格。
file
另外,在cart-items这个Vue组件的下方,还有一个表单。表单与Vue组件的关系大致如下:

<cart-items :items="{{$cartItems}}"></cart-items>
<form id="order-form">
    <select name="address">
        @foreach($addresses as $address)
            <option value="{{$address->id}}">
            {{$address->province}}{{$address->city}}{{$address->district}},{{$address->contact_phone}}
            </option>
        @endforeach
    </select>
<textarea name="remark"></textarea>
<button  class=" btn-create-order">提交订单</button>
</form>

这里,组件cart-items并没有被form表单包含。Form表单仅仅包含一个address下拉列表、remark备注和一个提交按钮。点击提交按钮会执行一段jQuery代码,内容如下

$(function(){
    $('.btn-create-order').click(function(){
        $req={
            address_id: $('#order-form select[name=address]').val(),
            remark: $('#order-form textarea[name=remark]').val(),
            items: app.items,
        }
        console.log($req)
    })
})

可以看到,jQuery读取Vue组件加工后的数组items的方法是使用语句【 items: app.items 】,这是如何实现的?方法超级简单,只需要在vue组件中将想要对外暴露的数据加上这个【 app.items=items 】即可!也就是通过app这东西从组件内部取出数据,然后提供给jQuery使用。

本作品采用《CC 协议》,转载必须注明作者和本文链接
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!
未填写
文章
63
粉丝
17
喜欢
140
收藏
118
排名:132
访问:7.4 万
私信
所有博文
社区赞助商