2018-09-22

1.全局组件：

Vue.component('my-component',{

    template:`

             

             

            `})

newVue({el:'#app',})

2.局部：

newVue

({el:".nr",components:{"my-component":{template:`

               

这是组件部分

                        `}            }      })

3.父传子：

Vue.component('my-father',{

                template:`

               

                   

                   

               

                `

                ,

                data:function(){

                    return{

                        arr:['apple','banana','orange'],

                        title:'水果列表'

                    }

                }

            })

            //获取title

            Vue.component('my-son',{

                props:['tit'],

                template:`

                 

{{tit}}

                `

            })

            Vue.component('my-list',{

                props:['fruit'],

                template:`

                   

                       

• {{value}}

                   

                `

            })

            new Vue({

                el:"#app",

            })

4.子传父：

Vue.component('my-father',{

            template:`

               

                 

{{mess}}

                 

               

            `,

            data:function(){

                return{

                    mess:''

                }

            },

            methods:{

              revMsg:function(txt){

                  this.mess=txt

              }

            }

        })

        Vue.component('my-child',{

            template:`

                给父组件

            `,

            data:function(){

                return{

                    msg:'ming'

                }

            },

            methods:{

                sendFather:function(){

//                  this.$emit('自定义事件',参数)

                    this.$emit('send',this.msg)

                }

            }

        })

        new Vue({

            el:"#app"

        })