vue.js私有组件创建方法

私有组件是在Vue(){}内部定义的，全局组件在Vue(){}外部定义

    <div id="main" v-cloak>
        <login></login>    //以组件名称为标签，用于显示组件
    </div>

    <template id="temp">    //用template标签定义组件模版，id定义组件名称
        <h1>登录组件---{{msg}}</h1>    //用插值表达式来渲染
    </template>


    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#main',
            components: {    //用components属性定义组件
                login: {    //login为组件名称
                    template: '#temp',    //获取组件模版
                    data() {    //data方法返回组件内容
                        return {
                            msg: '组件中data'
                        }
                    },
                    methods: {}
                }
            }
        })
    </script>

显示结果如下：