VUE——ref的使用 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Ref的使用</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>

    <body>
        <div id="root">
            <counter ref="one" @change="handleChange"></counter>
            <counter ref="two" @change="handleChange"></counter>
            <div>{{total}}</div>
        </div>
        <script type="text/javascript">
            Vue.component("counter", {
                template: "<div @click='handleClick'>{{number}}</div>",
                data() {
                    return {
                        number: 0
                    }
                },
                methods: {
                    handleClick() {
                        this.number++
                        this.$emit('change')
                    }
                }
            })

            var vm = new Vue({
                el: '#root',
                data: {
                    total: 0
                },
                methods: {
                    handleChange() {
                        this.total = this.$refs.one.number + this.$refs.two.number
                    }
                }
            })
        </script>
    </body>

</html>

 

posted @ 2019-10-26 16:46  嘆世殘者——華帥  阅读(211)  评论(0)  编辑  收藏  举报