Vue.component的属性说明

Vue.component('组件名称'，
{
template:'<p>aaa</p>'
})

Vue.component('组件名称'，
{
    data:fuction(){
        return(
            msg:'aa'
            //每个组件使用的数据都是独立的
            //每个数据都是新创建的
            //就算用的是同一个组件模板
            //var a=0
            //而直接return a
            //则会多个页面上的组件同时使用同一个数据源
        )
    }
})

Vue.component('组件名称'，
{
    methods:{
        方法名(){}
    }
})

Vue.component('组件名称'，
{
props:['对接父组件数据的名称'],
})

    <div id="father">
        <component is="one"></component>
        <component is="two"></component>
    </div>
    <script>
        Vue.component('one', {
            template: `
            <div>我是第一个组件</div>
            `
        })
        Vue.component('two', {
            template: `
            <div>我是第二个组件</div>
            `
        })
        let vm = new Vue({
            el: "#father"
        })
    </script>

   <div id="app">
             <button @click="onclick('hc-c')">显示第一个</button>
             <button @click="onclick('hc-b')">显示第二个</button>
             
            <component :is="name"></component>    
    </div>
    <script>
        Vue.component('hc-c', {
            template: `
                <div>我是第一个</div>
            `
        })
        Vue.component('hc-b', {
            template: `
                <div>我是第二个</div>
            `
        })
        let vm = new Vue({
            el: "#app",
            data:{
                name:''
            },
            methods:{
                onclick(item){
                    this.name = item;
                }
            }
        })
    </script>