vue vue tutorial two components (4)

Changing the value of the internal components of props, impact an external data

Want to send events to the parent component, we can call the instance of the built-in $emit method , passing the name of the event:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <title></title>
        <style type="text/css">

        </style>
    </head>
    <body>
        <div id="app">

            <!- ->Update: In the event call upPrice. Price method
            <my-button v-bind:count="price" v-on:update:price="upPrice"></my-button>

            <p>{{price}}</p>
        </div>
        <script>
            //全局定义组件
            Vue.component('my-button', {
                template: '<div><button>{{count}}</button></div>',
                props: {
                    count:{
                        type:Number,
                        default:0,
                        required: to false , 
                    } 
                }, 
                Mounted: function () { 
                    the let that = the this ; 
                    the setInterval ( function () {
                         // use $ EMIT function can call an external event, here called update vue example: price event 
                        . that $ emit ( ' Update:. price ' , that.count + . 1 ); 
                    }, 1000 ); 
                } 
            }); 

            var App =  new new Vue({
                el: '#app',
                data: {
                    price: 0,
                    value:1,
                },
                methods:{
                    upPrice:function(count){
                        this.price=count;
                    }
                }

            });
        </script>
    </body>
</html>

The front end of a full set of video tutorials [] https://weihaibao.taobao.com/m/QWYr3w57z click on the link, with more tutorials, please visit the shop (cheap justice, can not lose to buy can not buy fooled)

vue vue tutorial two components (4)

Guess you like