一、全局注册与局部注册组件

//全局注册组件
        Vue.component('my-component',{
            template:'<div>我是一个组件</div>'
        })

        var app = new Vue({
            el:'#app',
            //局部注册,注意多一个s
            components:{
                'app-component':{
                    template:'<div>我是一个app局部组件</div>'
                },
            },
        })

例子:全局注册与局部注册组件

二、组件间通信

2.1 一个父组件给子组件传递信息的demo

<child-component msg="我是父组件的信息"></child-component>
            components:{
                'child-component':{
                    props:['msg'],
                    template:'<div>{{msg}}</div>',
                },

例子:父组件向子组件传递-单向数据流

2.2 一个子组件给父组件传递信息的demo

<son-component v-model="total"></son-component>

        Vue.component('son-component',{
            template:`<div>
                <button @click="handleincrease">+1000</button>
                </div>`,
            data() {
                return {
                    count:2000
                }
            },
            methods: {
                handleincrease(){
                    this.count = this.count +1000
                    // this.$emit('change',this.count)
                    this.$emit('input',this.count)

                },
            },
        })

例子:子组件向父组件传递

2.3 一个非父子组件之间传值的demo

<body>
    <div id="app">
        <a-component ref="a"></a-component>
        <b-component ref="b"></b-component>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        Vue.component('a-component',{
            template:'<div><button @click="handle">点我向B组件传数据</button></div>',
            data() {
                return {
                    aaa:'我是来自A组件的内容',
                    msg:'我是A中的msg'
                }
            },
            methods: {
                handle(){
                    this.$root.bus.$emit('lala',this.aaa)
                }
            },
        })
        Vue.component('b-component',{
            template:'<div></div>',
            data() {
                return {
                    msg:'我是B中的msg'
                }
            },
            created() {
                //A组件在市里创建的时候就监听事件--lala事件
                this.$root.bus.$on('lala',function(value){
                    alert(value)
                })
            },
        })
        var app = new Vue({
            el:'#app',
            data:{
                //bus中介
                bus:new Vue(),
            },
        })
    </script>
</body>

例子:非父子组件之间传递