一、注册组件

1、全局组件

复制
<div id="app"><mycom></mycom>
</div>
 
<script> 
    Vue.component('mycom',{
        data(){
           return {
               title: '我是标题',
               content: '我是内容'
           }
        },
        template: '<div>这里是组件内容：{{ content }}</div>'
    });
    var vm=new Vue({
        el:'#app'
    })
</script>

2、私有组件

复制
<div id="app">
    <hello></hello>
</div>
 
var vm=new Vue({
    el:'#app',
    components: {
       hello: {
           template: '<div>这是私有组件</div>'
       }
    }
})

二、组件切换

复制
<div id="app">
    <a href="" @click.prevent="comName='login'">登录</a><a href="" @click.prevent="comName='register'">注册</a><component :is="comName"></component>
</div>
 
Vue.component('login',{
    template:'<div>登录组件</div>'
});
Vue.component('register',{
    template:'<div>注册组件</div>'
});
 
var vm=new Vue({
    el: '#app',
    data: {
        comName: 'login'
    }
})

三、值、方法传递

1、父组件向子组件传递值

复制
<div id="app">
    <hello v-bind:parmsg="msg"></hello>
</div>
 
var vm=new Vue({
    el: '#app',
    data: {
       msg: '父数据哈哈'
    },
    components:{
       hello:{
           template: '<div>显示父组件信息：{{ parmsg }}</div>',
           props:['parmsg']
       }
    }
})

2、父组件向子组件传递方法

复制
<div id="app">
    <com1 @func1="show"></com1>
</div>
 
<template id="tmp1">
    <div>
        <h1>子组件</h1>
        <input type="button" value="点击" @click="myclick">
    </div>
</template>
 
 
var com1={
    template: '#tmp1',
    data(){
        return{
           sonmsg: '哈哈456'
        }
    },
    methods:{
        myclick(){
            this.$emit('func1','参数123', this.sonmsg)
        }
    }
}
var vm=new Vue({
    el: '#app',
    methods: {
        show(p1, p2){
            console.log('OK。参数：'+p1+','+p2)
        }
    },
    components:{
        com1
    }
})

3、父组件通过ref调用子组件值、方法

复制
<div id="app">
    <input type="button" value="点击" @click="getElement"><login ref="mylogin"></login>
</div>
 
var login={
    template:'<div>登录组件</div>',
    data(){
        return{
            msg: '子组件信息'
        }
    },
    methods: {
        show(){
            console.log('子组件方法')
        }
    }
}
var vm=new Vue({
    el:'#app',
    methods:{
        getElement(){
            console.log('获取子组件数据：'+this.$refs.mylogin.msg)
            this.$refs.mylogin.show()
        }
    },
    components:{
        login
    }
})