当前位置 > it书童 > vue > 正文

vue 父子组件数据传递

vue it书童 2020-01-07 21:45:16 0赞 0踩 130阅读 0评论

父组件以属性的方式向子组件传递数据

<div id="app">
    <div class="container mt-5">
<!-- 父组件向子组件传值:用属性的方式  -->
        <counter :count="0"></counter>
        <counter :count="1"></counter>
    </div>
</div>
<script>
    var counter = {
        props: ['count'], // 接收父组件传递的数据
        template: '<div @click="handlerClick">{{ number }}</div>',
        data: function() {
            return {
                number: this.count
            }
        },
        methods: {
            handlerClick: function () {
                // this.count ++
                // 以上写法虽然能起作用,但 vue 会报警告
                // 单向数据流:父组件可以向子组件传任意数据,但子组件不能修改父组件的数据
                // 之所以这么设计,如果传递的是引用类型的数据,这个数据被多个子组件引用,其中一个子组件修改了,就会影响到其他组件
                // 解决方式:将数据复制一份到子数据自己的 data 中

                // 修改自己的 number
                this.number ++
            }
        }
    }
    var app = new Vue({
        el: '#app',
        data: {
            total: 0
        },
        components: {
            counter: counter
        }
    })
</script>

子组件通过事件向父组件传数据

<div id="app">
    <div class="container mt-5">
<!-- 父组件向子组件传值:用属性的方式  -->
        <counter :count="3" @inc="handleIncrease"></counter>
        <counter :count="2" @inc="handleIncrease"></counter>
        <div class="mt-3">{{ total }}</div>
    </div>
</div>
<script>
    var counter = {
        props: ['count'], // 接收父组件传递的数据
        template: '<div @click="handlerClick">{{ number }}</div>',
        data: function() {
            return {
                number: this.count
            }
        },
        methods: {
            handlerClick: function () {
                var step = 2
                this.number = this.number + step
                this.$emit('inc', step)
            }
        }
    }
    var app = new Vue({
        el: '#app',
        data: {
            total: 5
        },
        components: {
            counter: counter
        },
        methods: {
            handleIncrease: function (step) {
                this.total += step
            }
        }
    })
</script>

源码

转载须注明出处:https://www.itshutong.com/articles/378/vue-parent-child-component-data-transfer
标签: 讲义
关于我
一个文科出身的程序员,追求做个有趣的人,传播有价值的知识,微信公众号主要分享读书思考心得,不会有代码类文章,非程序员的同学请放心订阅
发表评论
我有句话,不知当讲不当讲?
要讲之前请先 登录