组件的出现,就是为了拆分Vue实例的代码量,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应组件即可
组件化和模块化的不同:
- 组件化:是从UI界面的角度进行划分的;前端的组件化,方便UI组件的重用;
- 模块化:是从代码逻辑的角度进行划分的;方便代码分层开发,保证每个功能模块的职能单一;
法一:
全局组件
位置关联下就都可以用
<div id="enjoy">
<!--4.使用组件-->
<my-date></my-date>
<my-date></my-date>
</div>
<hr>
<div id="enjoy1">
<!--4.使用组件-->
<my-date></my-date>
</div>
{
//1.创建组件构造器
let Profile = Vue.extend({
//1.1模板选项
//通过 template 属性,指定了组件要展示的HTML结构
//组件模板,必须有且仅有唯一的根元素,下面的都一样
template: `
<div>
<input type="date">
<p>hello world!</p>
</div>
`
});
//2.注册全局组件
//Vue.component(组件名称,构造器);
//组件名中出现驼峰式 myDate,则引用变为 my-date(总之引用不要出现大写字母)
Vue.component('myDate', Profile);
//3.关联位置(只有在关联位置下才可以使用组件,且关联位置在1和2后面)
new Vue({
el: '#enjoy',
});
new Vue({
el: '#enjoy1',
});
}
局部组件
仅仅当前可用
<div id="fun">
<!--4.使用组件-->
<my-date></my-date>
<my-color></my-color>
</div>
{
//1.创建组件构造器
let Profile = Vue.extend({
//1.1模板选项
template: `
<div>
<input type="date">
<p>hei world!</p>
</div>
`
});
let Profile1 = Vue.extend({
//1.1模板选项
template: `
<div>
<input type="color">
<p>hei john!</p>
</div>
`
});
//3.关联位置(只有在关联位置下才可以使用组件)
new Vue({
el: '#fun',
components: {
//2.注册局部组件
//组件名中不要出现大写字母
'my-date': Profile,
'my-color': Profile1
}
});
}
法二:
全局组件
<div id="enjoy">
<my-date></my-date>
<my-date></my-date>
</div>
{
Vue.component('my-date', {
template: `
<div>
<input type="date">
<p>hello world!</p>
</div>
`
});
new Vue({
el: '#enjoy',
});
}
局部组件
<div id="fun">
<my-date></my-date>
<my-color></my-color>
</div>
{
new Vue({
el: '#fun',
components: {
'my-date': {
template: `
<div>
<input type="date">
<p>hei world!</p>
</div>
`
},
'my-color': {
template: `
<div>
<input type="color">
<p>hei john!</p>
</div>
`
}
}
});
}
法三(外部定义组件)(推荐):
全局组件
<div id="app">
<my-com></my-com>
</div>
<!-- 在被控制的 #app 外面,使用 template 元素,定义组件的HTML模板结构 -->
<!--<script type="text/template" id="tmp"></script> 也可以定义组件模板,不常用-->
<template id="tmp">
<div>
<h5>这是通过 template 元素,在外部定义的组件结构,这个方式有代码的提示和高亮</h5>
<h1>好用!</h1>
</div>
</template>
{
Vue.component('myCom', {
template: '#tmp'
});
let vm = new Vue({
el: '#app',
data: {},
methods: {}
});
}
局部组件
<div id="app">
<my-com></my-com>
</div>
<!-- 在被控制的 #app 外面,使用 template 元素,定义组件的HTML模板结构 -->
<!--<script type="text/template" id="tmp"></script> 也可以定义组件模板,不常用-->
<template id="tmp">
<div>
<h5>这是通过 template 元素,在外部定义的组件结构,这个方式有代码的提示和高亮</h5>
<h1>好用!</h1>
</div>
</template>
{
let vm = new Vue({
el: '#app',
components:{
'myCom':{
template:'#tmp'
}
},
data: {},
methods: {}
});
}