Data and event delivery of parent and child components

When defining a child component in Vue, passing data from the parent component to the child component can pass the data through the props attribute in the child component definition:

<div id="box">
        <cart :goods="goods"></cart>
        <span>Total Price: ${{totalPrice}}</span>
    </div>

    <script type="text/x-template" id="cart">
        <table border="1px" width="90%">
                <tr>
                <th>serial number</th>
                <th>Product Name</th>
                <th>price</th>
                <th>数量</th>
                </tr>

                <tr v-for="(item,key) in goods">
                    <td>{{key + 1}}</td>
                    <td>{{item.goodsName}}</td>
                    <td>{{item.price}}</td>
                    <td>
                    <input type="text"  v-model="item.num" @blur="sum">
                    </td>
                </tr>
                </table>
    </script>

    <script type="text/javascript">

        var cart = {
            props:['goods'],
            template:'#cart',
        };

       var app = new Vue ({
           el:'#box',
           mounted(){
               this.total();
           },
           methods:{
               total(){
                   console.log('total');
                   this.totalPrice = 0;
                   this.goods.forEach((v)=>{
                       this.totalPrice += v.num * v.price;
                   })
               }
           },
           data:{
               totalPrice: 0,
               goods:[
                   {goodsName:'iphone7Plus',price:600,num:1},
                   {goodsName:'vip card',price:200,num:1},
               ]
           },
           components:{cart}
       });
    </script>

　　Then use :goods in the tab to bind the data, and then you can use the data in the template, the effect is as follows:

If you change the quantity value in the child component, if you modify the total price, then it involves sending events from the child component to the parent component, and you have to use the $emit function to trigger:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript" src="./node_modules/vue-resource/dist/vue-resource.js"></script>
</head>
<body>
    <div id="box">
        <cart :goods="goods" @sum="total"></cart>
        <span>Total Price: ${{totalPrice}}</span>
    </div>

    <script type="text/x-template" id="cart">
        <table border="1px" width="90%">
                <tr>
                <th>serial number</th>
                <th>Product Name</th>
                <th>price</th>
                <th>数量</th>
                </tr>

                <tr v-for="(item,key) in goods">
                    <td>{{key + 1}}</td>
                    <td>{{item.goodsName}}</td>
                    <td>{{item.price}}</td>
                    <td>
                    <input type="text"  v-model="item.num" @blur="sum">
                    </td>
                </tr>
                </table>
    </script>

    <script type="text/javascript">

        var cart = {
            props:['goods'],
            template:'#cart',
            methods:{
                sum(){
                    console.log('sum');
                    this.$emit('sum')
                }
            }
        };

       var app = new Vue ({
           el:'#box',
           mounted(){
               this.total();
           },
           methods:{
               total(){
                   console.log('total');
                   this.totalPrice = 0;
                   this.goods.forEach((v)=>{
                       this.totalPrice += v.num * v.price;
                   })
               }
           },
           data:{
               totalPrice: 0,
               goods:[
                   {goodsName:'iphone7Plus',price:600,num:1},
                   {goodsName:'vip card',price:200,num:1},
               ]
           },
           components:{cart}
       });
    </script>
</body>
</html>

Data and event delivery of parent and child components

Guess you like