ちょうきょう666

导航

9,Vue组件2 

<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="t">
<!-- 父组件 -->
            <!-- 父组件通过属性向子组件传值，父组件可以向子组件传递任何数据，
            子组件不能修改父组件传递过来的数据，若非要修改可以拷贝副本 -->
            <counter :count="1"></counter>
            <counter :count="2"></counter>
        </div>
        <script>
// 子组件
            //子组件通过事件向父组件传值
            var counter={
                props:['count'],
                data:function(){
                    return{
                    number:this.count
                    }
                },
                template:'<div @click="handleClick">{{number}}</div>',
                methods:{
                    handleClick:function(){
                        this.number++
                    }
                },
                
            }
            var vm=new Vue({
                el:"#t",
                components:{
                    counter:counter
                }
})
        </script>
    </body>
</html>

 

posted on 2021-02-05 13:40  ちょうきょう666  阅读(37)  评论(0)    收藏  举报