Vue组件化开发
组件使用的三个步骤 1.创建组件构造器 2.注册组件 3.使用组件 < div id = " app " > <!-- 使用组件 --> < cpn > </ cpn > </ div > < script > // 1.创建组件构造器对象 const cpnC = Vue . extend ( { template : ` <div> <h2>我是标题</h2> </div>` } ) ; // 2.注册组件(标签名,组件构造器) Vue . component ( "cpn" , cpnC ) const app = new Vue ( { el : "#app" , } ) </ script > 各步骤的含义: 1.Vue.extend(): 调用Vue.extend()创建的是一个组件构造器。 通常在创造组件构造器时,传入template代表我们自定义组件的模板。 该模板就是在使用到组件的地方,要显示的HTML代码。 2.Vue.component(): 调用Vue.component()是将刚才的组件构造器注册为一个组件,并且给它起一个组件的标签名称。 所以需要传两个参数:1、注册组件的标签名 2、组件构造器 全局组件和局部组件 1.全局组件:通过Vue.component注册组件 2.局部组件:在创建的Vue实例中注册组件 const app=new Vue({ el