Vue 组件抽离写法

组件抽取模板

一、通过Script标签抽取出来模板

<script type="text/x-template" id="cpn">

<script type="text/x-template" id="cpn">
        <div>
            <h2>我是标题1</h2>
            <p>我是内容1</p>
            <p>我是内容1</p>
        </div>
            注册模板
            Vue.component('cpn', {
                template: '#cpn'
            })
    </script>

二、通过 template标签方式抽离末班

<template id="cpn3">
        <div>
            <h2>我是标题3</h2>
            <p>我是内容1</p>
            <p>我是内容1</p>
        </div>
</template>

三、注册模板

<script src="./js/vue.js"></script>
        <script>
            Vue.component('cpn3', {
                template: '#cpn3'
            })
            Vue.component('cpn', {
                template: '#cpn'
            })
            const app = new Vue({
                el: "#app",
                data: {
                    message: "你好啊"
                },
                
                components: {
                    'cpn2': {
                        template:`
                        <div>
                            <h2>我是标题2</h2>
                            <p>我是内容2</p>
                            <p>我是内容2</p>
                        </div>
                        `
                    }
                }
            })
</script>