Vue创建组件

164 阅读1分钟

Vue组件创建两大步:1.创建组件 2.注册组件

// 1.创建组件构造器
        const cpnC = Vue.extend({
            template:`
            <div>
                <h2>我是标题</h2>
                <p>我是</p>
            </div>
            `
        })
 // 2.注册组件
         Vue.component("firstcnp",cpnCC);

注册组件简洁写法:

注册全局组件语法糖写法
         Vue.component("firstcnp",{
             template:`
             <div>
                 <h2>我是标题</h2>
                 <p>我是</p>
             </div>
             `
         })

当然除了在script中写组件的内容以外,还可以在body中写组件的内容(更好写)

<body>
<template id="name2">
        <div>
            <h2>我不是</h2>
            <p>但xx是</p>
        </div>
    </template>
</body>
 Vue.component("cnp2",{
            template:"#name2"
        })