使用 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查询到商品真实价格。

另外，在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 协议》，转载必须注明作者和本文链接