一、註冊元件

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 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    }})