Vue父子组件的数据传递 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父子组件传值</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        <!--加上冒号是让"0","1"成为js表达式，不是字符串-->
        <counter :count="1" @inc="handleIncrease"></counter>
        <counter :count="3" @inc="handleIncrease"></counter>
        <div>{{total}}</div>
    </div>
<script>
    var counter = {
        props:['count'],
        data: function(){
            return{
                number:this.count
            }
        },
        template: "<div @click='handleClick'>{{number}}</div>",
        methods:{
            handleClick:function () {
                this.number = this.number+2;
                this.$emit('inc',2) //每次点击按钮都是向外触发inc事件,步长为2
            }
        }
    };


    var vm = new Vue({
        el: '#root',
        data:{
          total:4
        },
        //注册子组件
        components: {
            counter: counter
        },
        methods:{
            handleIncrease:function (step) {
                this.total +=2
            }
        }
    })
</script>
</body>
</html>

<!--
父组件向子组件传递数据：通过属性的形式向子组件传递数据,
                       父组件向子组件随意的传递参数，但是子组件不能随意修改父组件传递过来的参数(单项数据流)
                       解决上述问题吧办法一：在子组件中创建data对象，创建副本，返回自己的number数据，修改自己就可以了

子组件向父组件传递数据:this.$emit
-->

 

posted @ 2018-11-20 09:09  alexbiu  阅读(252)  评论(0)    收藏  举报