什么是组件化
就像我们出处理一个非常复杂问题时，我们会将其分解成多个小问题，最后将其放在整体中，最后会发现最大的问题也会迎刃而解。
vue的组件化也是同样的思想，它提供供了一种抽象，让我们可以开发出一个个独立可复用的组件来构造我们的应用。
我们可以将页面看作一个大组件，在大组件中你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。
通过组件化思想，尽可能将页面拆分成一个个可复用的小组件，这样让我们的代码更加方便使用和管理，并且扩展性也更强。
组件注册基本步骤
- 使用Vue.extend()方法创建组件构造器
- 使用Vue.component注册组件
- 在vue实列作用范围内使用组件
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!-- 3使用组件 -->
<ma-cpn></ma-cpn>
<!-- 组件可重复使用 -->
<ma-cpn></ma-cpn>
</div>
<!-- 在Vue实列外的组件不会生效 -->
<ma-cpn></ma-cpn>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
// l创建组件构造器对象
const cpn = Vue.extend({
template:
`<div>
<h1>this is component</h1>
</div>`
});
//2.注册组件
Vue.component('ma-cpn',cpn);
const app = new Vue({
el:"#app",
})
</script>
</body>步骤解析
1.Vue.extend()
- Vue.extend()创建的是一个组件构造器
- template代表我们自定义的组件模板，该模板就是在使用组件的地方要显示的HTML代码。
- 但事实上这种方法在Vue2.x的文档中基本看不到了，它会使用稍后提到的的语法糖注册，但这种方式是学习其它方式的基础。
2.Vue.component()
- 调用Vue.component()是将组件构造器注册为一个组件，并给组件取一个标签名称。
- 注册组件需要两个参数：1.注册组建的标签名，2.组件构造器
3.组件必需挂载在某个Vue实列下，否则不会生效。
注：在使用组件时用驼峰式命名会报错
若在注册式的名称为驼峰式命名：Vue.component('maCpn',cpn);
那么在使用式要以“-”分割：
局部组件和全局组件
全局组件
上面通过Vue.component注册的组建是全局组件，也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中，但全局注册往往是不够理想的。比如，如果你使用一个像 webpack这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。
局部组件
components属性可以用来注册局部组件
const app = new Vue({
el:"#app",元素
data:{
message:"this is vue",
},
//注册局部组件的语法糖
components:{
ma-cpn:cpn
});注意：局部注册的组件在其子组件中不可用
如果你想要在父组件中注册一个子组件，可以使用components属性。
//子组件
const child = Vue.extend({
template:
`<div>
<h1>this is component</h1>
</div>`
});
// 父组件
const father = Vue.extend({
template:
`<div>
<h1>this is component</h1>
</div>`,
//注册子组件
components:{
child:child
}
});当子组件注册到父组件时，vue会编译好父组件的模块，该模板的内容已经决定了父组件要渲染的HTML（相当于父组件中已经有子组件的内容了），所以
注册组件的语法糖写法
不使用语法糖注册组件的方式可能会显得有些繁琐，vue为了简化这个过程，提供的注册的语法糖，省去了Vue.extend()这个步骤，使用一个对象来代替它。
text 代码: // 注册全局组件语法糖写法
Vue.component('cpn1',{
template:
`<div>
<h1>全局组件的语法糖写法</h1>
</div>`,
components:{
<!-- 注册局部组件的语法糖写法 -->
cpn2:{
template:`
<h1>局部组件的语法糖写法</h1>
`,
}
}
})
组件模板的抽离写法
上面我们通过语法糖写法简化了组件注册的过程，但为了使结构变得更加清晰，我们会将template模块分离出来，然后挂载到对应的组件上。
vue提供的两种方法来定义模块
1.使用script标签
<body>
<div id="app">
<my-cpn></my-cpn>
</div>
<script type="text/x-template" id="cpn">
<div>
<div>通过script标签将HTML模板分离出来</div>
</div>
</script>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
let cpn = {
template:"#cpn",
components:{
}
}
const app= new Vue({
el:"#app",
components:{
myCpn:cpn
}
})
</script>
</body>
1.使用template标签
text 代码:<body>
<div id="app">
<my-cpn></my-cpn>
</div>
<template id="cpn">
<div>
<div>通过template 标签将HTML模板分离出来</div>
</div>
</template>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
let cpn = {
template:"#cpn",
components:{
}
}
const app= new Vue({
el:"#app",
components:{
myCpn:cpn
}
})
</script>
</body>
本站由
274
条评论 我要发表评论