vue教程二 vue组件(4)

组件内部改变props值，影响外部数据

想要向父组件发送事件，我们可以调用实例中内置的 $emit 方法，传递事件名称：

<!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:price事件在调用upPrice方法 -->
            <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:false,
                    }
                },
                mounted:function(){
                    let that=this;
                    setInterval(function(){
                        //使用$emit函数能够调用外部的事件,这里调用了vue实例的update:price事件
                        that.$emit('update:price',that.count+1); 
                    },1000);
                }
            });

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

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

【前端全套视频教程】https://weihaibao.taobao.com/m/QWYr3w57z 点击链接，跟多教程请浏览本店（价格便宜公道，买不了吃亏买不了上当）

vue教程二 vue组件(4)

猜你喜欢