vue2中給組件傳值props和ref哪一種比較常用？

假設一個經(jīng)常在不同頁面使用的購物車彈窗組件，需要父組件傳遞默認價格、價格可選范圍、數(shù)量、可選數(shù)量范圍、型號、規(guī)格等信息，然后購物車組件再將用戶選擇的數(shù)據(jù)傳回給父組件頁面作處理?，F(xiàn)在處理方式有2種。
方式1.使用ref，然后在子組件中data函數(shù)直接return獲得

父組件中
html:

<add-cart-pop
                v-on:confirmAddCart="addCart"
                ref="addCartPop"
        >

        </add-cart-pop>

javascript:

this.$refs.addCartPop.$data.name =  this.detailData.name;
this.$refs.addCartPop.$data.inventory =  this.detailData.inventory;
this.$refs.addCartPop.$data.buttomPrice =  this.detailData.buttomPrice;
this.$refs.addCartPop.$data.topPrice =  this.detailData.topPrice;
this.$refs.addCartPop.$data.salePrice =  this.detailData.salePrice;
this.$refs.addCartPop.$data.quantity =  this.detailData.miniPurchaseCount;
this.$refs.addCartPop.$data.unit =  this.detailData.unit;

子組件中：
javascript

data(){
            return {
                name:'',
                inventory:0,
                quantity:0,
                miniPurchaseCount:0,
                salePrice:'',
                buttomPrice:0,
                topPrice:0,
                unit:'',
                deleteSh:false
            }
        },
        methods: {
            addCart() {
                this.$emit('confirmAddCart',[this.quantity,this.salePrice]);
            }
         }

方式2.v-bind綁定，子組件中props接受，return中定義要改變傳給父組件的屬性：
父組件中：
html：

<add-cart-pop
                v-on:confirmAddCart="addCart"
                :name="name"
                :inventory="inventory"
                :quantity="quantity"
                :mini-purchase-count="miniPurchaseCount"
                :sale-price="salePrice"
                :buttom-price="buttomPrice"
                :top-price="topPrice"
                :unit="unit"
        >
        </add-cart-pop>

javascript:

this.name = this.detailData.name;
this.inventory = this.detailData.inventory;
this.buttomPrice = this.detailData.buttomPrice;
this.topPrice = this.detailData.topPrice;
this.salePrice = this.detailData.salePrice;
this.miniPurchaseCount = this.detailData.miniPurchaseCount;
this.quantity = this.detailData.miniPurchaseCount;
this.unit = this.detailData.unit

子組件中：
javascript:

props: {
            name: {
                type:String,
                default:''
            },
            inventory: {
                type:Number,
                default:0
            },
            quantity: {
                type:Number,
                default:0
            },
            miniPurchaseCount: {
                type:Number,
                default:0
            },
            salePrice: {
                type:Number,
                default:''
            },
            buttomPrice: {
                type:Number,
                default:0
            },
            topPrice: {
                type:Number,
                default:0
            },
            unit:{
                type:String,
                default:''
            }

        },
        data:function () {
            return {
                cartQuantity:this.quantity,
                cartSalePrice:this.salePrice
            }
        },
        methods: {
            addCart() {
                this.cartQuantity = Number(this.cartQuantity);
                this.$emit('confirmAddCart',[this.cartQuantity,this.cartSalePrice]);
            }
           }

用哪一種是比較好呀