vue-组件

 

 

 

 

<!DOCTYPE html>
<html>
    <head>
        
        <meta charset="utf-8">
        <title>vue1</title>
        <script src="vue.js"></script>
        <link rel="stylesheet" type="text/css" href="vue.css">
    
    </head>
    <body>
        
        
        <div id="app">
           //app为父组件，传值给子组件
            <ul><todo-item v-for="item of list" :item="item"></todo-item></ul>
            
        </div>    
        
        
        <script>
            //定义全局组件
            // Vue.component("TodoItem",{
            //     props:["item"],
            //     template:`<li >{{item}}</li>`

            // })

            //定义局部组件
            var TodoItem={
                props:["item"],
                template:`<li >{{item}}</li>`
            }

            var app=new Vue({
                el:"#app",
                data:{
                    list:['a1a','b1b']
                },
                //局部组件要在这里注册
                components:{
                    TodoItem

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

 

 

 

父子，子父，同级传值

 

<!DOCTYPE html>
<html>
    <head>
        
        <meta charset="utf-8">
        <title>vue1</title>
        <script src="vue.js"></script>
        <link rel="stylesheet" type="text/css" href="vue.css">
    
    </head>
    <body>
        
        
        <div id="app">
            <!-- app为父组件，传值给子组件  ：itme相当于 v-bind -->
            <!-- <ul><zujian v-for="item of list" :item="item"></zujian></ul> -->

            <!-- 子组件传值给父组件，接收事件ziinfo -->
            <!-- <zichuanfu @ziinfo="accept"></zichuanfu> -->


            <boycompt></boycompt>
            <girlcompt></girlcompt>
            
        </div>    
        
        
        <script>
            //定义全局组件
            // Vue.component("TodoItem",{
            //     props:["item"],
            //     template:`<li >{{item}}</li>`

            // })


          

            //定义局部组件
            // var zujian={
            //     props:["item"],
            //     template:`<li >{{item}}</li>`,
            //     data(){
            //         return{
            //             info:'我是子组件'
            //         }
            //     }
            // }




            // var zichuanfu={
            //     props:["item"],
            //     template:`<button @click="send">send</button>`,
            //     data(){
            //         return{
            //             info:'我是子组件'
            //         }
            //     },
            //     methods:{
            //         send:function(){
            //             this.$emit('ziinfo',this.info)
            //         }


            //     }
            // }

            //同级使用bus传值 一个bus.$emit发送，一个bus.$on监听
            var bus=new Vue()
            var boycompt={
                props:["item"],
                template:`<button @click="send">send</button>`,
                data(){
                    return{
                        info:'我是子组件'
                    }
                },
                methods:{
                    send:function(){
                        bus.$emit('boy',this.info)
                    }


                }
            }


            var girlcompt={

                template:`<div>{{msg}}</div>`,
                data(){
                    return{
                        msg:""
                    }
                },
                created:function(){
                    var me=this
                    bus.$on('boy',function(info){
                        me.msg=info

                    })
        
                }


                
            }

            var app=new Vue({
                el:"#app",
                data:{
                    list:['a1a1','b1b1']
                },
                methods:{
                    accept:function(info){
                        console.log(info)
                    }

                },
                //局部组件要在这里注册
                components:{
                    boycompt,
                    girlcompt

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

 

posted @ 2020-04-07 13:23  JinweiChang  阅读(161)  评论(0)  编辑  收藏  举报