父组件注册模板

<div id="app">
    <my-cpn></my-cpn>
</div>

<template id="con">
    <div>
        <h2>{{titile}}</h2>
        <p>我是内容，哈哈哈哈哈</p>
        <p>我是内容，呵呵呵呵和</p>
    </div>
</template>

<script src="vue.min.js"></script>
<script>
    //语法糖
    Vue.component('my-cpn', {
        template: '#con',
        //使用data储存组件的实例数据，注意，组件不能使用vue对象的实例，
        //所以组件实例拥有自己的储存实例的地方即data函数
        //为什么是函数？
        //因为函数使返回的对象都是新的对象，使组件在多次复用的时候都保持互相的互斥性
        //而是使用data实例返回的都是同一个对象
        data() {
            return {
                titile: 'abd'
            }
        },
        //组件也拥有自己方法
        methods: {

        }
    })

    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊'
        }
    })
</script>