Vuejs学习笔记(二)-1.组件的基本使用-全局组件和局部组件
组件化开发是程序代码的分类复用,使用抽象的思想,将相同的页面模块抽象成一个组件,以便在不同页面复用,不同项目复用。
一、全局组件
解释下,全局组件就是构建的组件所有vue实例都可以用,
vue组件创建的基本方法如下:
1.创建组件构造器 :
const cpn =Vue.extend({
template:''
})
注解:使用Vue实例的extend方法构造组件,参数之一,html的模板。并将构建的组件给到一个变量cpn,cpn是component的缩写。
2.注册组件:
Vue.component( 'cpn-name',cpn)
在Vue实例中注册一个组件,其中cpn-name为组件的名称,可以直接作为标签放在Html中使用,cpn这是实际组件的对象变量。注册时,组件名称在前面,引号引用.
这个注册属于全局注册,所有的Vue实例都可以使用。
3.使用组件
就是在Vue对应挂载的Html内容中是使用,
1 <!-- 2 @author:invoker 3 @project:project_lianxi 4 @file: 01-vue组件的基本使用.html 5 @contact:invoker2021@126.com 6 @descript: 7 @Date:2021/7/2 14:43 8 @version: html5 9 --> 10 11 <!DOCTYPE html> 12 <html lang="en"> 13 <head> 14 <meta charset="UTF-8"> 15 <title>01-vue组件的基本使用</title> 16 </head> 17 <body> 18 <div id="app"> 19 <h2>{{ message }}</h2> 20 <!-- 3.使用组件--> 21 <my-cpn></my-cpn> 22 </div> 23 24 <script src="../js/vue.js"></script> 25 <script> 26 27 // 1.创建组件构造器对象 28 const cpn = Vue.extend({ 29 template: ` 30 <div> 31 <h2>我是标题</h2> 32 <p>我是内容</p> 33 </div> 34 ` 35 }) 36 37 // 2.注册组件 38 Vue.component('my-cpn', cpn) 39 const app = new Vue({ 40 el: '#app', 41 data: { 42 message: 'hello' 43 }, 44 }) 45 </script> 46 </body> 47 </html>
这个是最原始的组件创建和使用的代码,后面会慢慢演化
。
二、局部组件
全局组件所有的Vue实例都可以用,而局部组件属于某一个Vue实例,哪个Vue实例内部注册了该组件,哪个Vue实例的对应挂载的Html中就可以引用该组件。
代码如下:
1 <!-- 2 @author:invoker 3 @project:project_lianxi 4 @file: 01-vue组件的基本使用.html 5 @contact:invoker2021@126.com 6 @descript: 7 @Date:2021/7/2 14:43 8 @version: html5 9 --> 10 11 <!DOCTYPE html> 12 <html lang="en"> 13 <head> 14 <meta charset="UTF-8"> 15 <title>01-vue组件的基本使用</title> 16 </head> 17 <body> 18 <div id="app1"> 19 <h2>{{ message }}</h2> 20 <!-- 3.1使用全局组件cpn1和局部组件cpn2--> 21 <cpn1></cpn1> 22 <cpn2></cpn2> 23 </div> 24 25 <div id="app2"> 26 <h2>{{ message }}</h2> 27 <!-- 3.2使用全局组件cpn1和局部组件cpn2--> 28 <cpn1></cpn1> 29 <cpn2></cpn2> 30 </div> 31 32 <script src="../js/vue.js"></script> 33 <script> 34 35 // 1.1 创建组件构造器对象cpn1 36 const cpn1 = Vue.extend({ 37 template: ` 38 <div> 39 <h2>我组件1(全局组件)的标题</h2> 40 <p>我组件1(全局组件)的内容</p> 41 </div> 42 ` 43 }) 44 // 1.2 创建组件构造器对象cpn2 45 const cpn2 = Vue.extend({ 46 template: ` 47 <div> 48 <h2>我组件2(局部组件)的标题</h2> 49 <p>我组件2(局部组件)的内容</p> 50 </div> 51 ` 52 }) 53 54 // 2.1注册组件(全局组件) 55 Vue.component('cpn1', cpn1) 56 57 // 0.创建vue实例1 58 const app1 = new Vue({ 59 el: '#app1', 60 data: { 61 message: "i'm Vue实例1" 62 }, 63 }) 64 // 0.创建vue实例2 65 const app2 = new Vue({ 66 el:'#app2', 67 data:{ 68 message:"i'm Vue实例2" 69 }, 70 // 2.2Vue实例2内注册组件(局部组件) 71 components:{ 72 cpn2:cpn2 73 } 74 }) 75 </script> 76 </body> 77 </html>
本文来自博客园,作者:kaer_invoker,转载请注明原文链接:https://www.cnblogs.com/invoker2021/p/14963294.html