一. 创建全局组件的方法
1. 分为两步,首先使用 Vue.extend() 创建模板对象,然后使用Vue.component(‘组件的名称’, 组件的模板对象) 创建组件。
代码格式为:
//方法一:
//第一步:创建模板对象
var component1 = Vue.extend({
template: '<h3>这是用Vue.extend 创建的组件</h3>'
});
//第二步:使用Vue.component('组件的名称', 组件的模板对象)
Vue.component('myComponent1', component1);
//当然也可将两步合一:
Vue.component('myComponent1', Vue.extend({
template: '<h3>这是用Vue.extend 创建的组件</h3>'
})
);
2. 直接使用Vue.components() 创建组件。
代码格式为:
//方法二:
Vue.component('myComponent2', {
template: '<h3>这是直接使用Vue.components创建出来的组件</h3>'
});
3.基于第二种方法,在控制显示的div元素外,使用template模板直接定义组件的template模板结构。
代码格式为:
<template id="template2">
<h1>这是外部定义的私有组件</h1>
</template>
//方法三:在被控制的div元素外,直接定义组件的template模板结构
Vue.component('myComponent3', {
template: '#template'
});
二. 创建私有组件
在Vue实例内,使用Vue含有的components属性创建。
代码格式:
<div id="app2">
<login></login>
<login2></login2>
</div>
<template id="template2">
<h1>这是外部定义的私有组件</h1>
</template>
//定义私有组件
var vm2 = new Vue({
el: '#app2',
data: {},
methods: {},
components: {
login: {
template: '<h1>这是私有的组件login</h1>'
},
login2: {
template: '#template2'
}
}
})
三. 组件的调用
直接将组件名称作为一个标签写入。
例如:对 二 中的私有组件login调用,直接在html中使用<login></login>
注意: 若遇到驼峰命名法的组件名称,在调用组件,将其标签化时,必须将名称中的所有大写字母变成小写,并在改写后的字母前使用“-”连接(可以视作单词之间的连接符号)。
例如:组件名称为 myComponent1 ,则标签化后为<my-component1></my-component1>
。这里的大写字母C化为小写,前面加了“-”连接。
四. 完整代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<my-component1></my-component1>
<my-component2></my-component2>
<my-component3></my-component3>
</div>
<div id="app2">
<login></login>
<login2></login2>
</div>
<template id="template">
<div>
<h1>这是template元素在外部定义的组件结构,推荐使用</h1>
</div>
</template>
<template id="template2">
<h1>这是外部定义的私有组件</h1>
</template>
<script>
//创建全局的Vue组件
//方法一:
//第一步:创建模板对象
var component1 = Vue.extend({
template: '<h3>这是用Vue.extend 创建的组件</h3>'
});
//第二步:使用Vue.component('组件的名称', 组件的模板对象)
Vue.component('myComponent1', component1);
//方法二:
Vue.component('myComponent2', {
template: '<h3>这是直接使用Vue.components创建出来的组件</h3>'
});
//方法三:在被控制的div元素外,直接定义组件的template模板结构
Vue.component('myComponent3', {
template: '#template'
});
var vm1 = new Vue({
el: '#app',
data: {
}
});
//定义私有组件
var vm2 = new Vue({
el: '#app2',
data: {},
methods: {},
components: {
login: {
template: '<h1>这是私有的组件login</h1>'
},
login2: {
template: '#template2'
}
}
})
</script>
</body>
</html>