组件
什么是组件
组件(Component)是Vue最强大的功能之一。组件是对功能的抽象封装,组件可以扩展HTML元素,封装可重用的代码。
为什么要使用组件
在大型应用中为了分工、代码复用,不可避免地需要将应用抽象为多个相对独立的模块,组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可。
如何使用组件
1.全局注册
Vue.component('组件名称', {
template: "<div>组件模板内容</div>"
data () {
return {
}
},
methods: {}
})
组件的名称的命名规范:
1. 由数字字母下划线短横线组成, 不能由数字开头
2. 建议采取大驼峰法命名
3. 建议不要使用html的标签名(如果要使用标签名,首字母大写)
options配置项:
template (必填)
data (必须是一个函数)
methods
tempate的写法:
1. html的字符串 (根元素不能使用template)
注意:
template中只能有一个根元素
2. 'template标签的选择器'
注意:
1. template标签不要放在Vue实例的节点中
2. 因为IE不支持template标签, 需要在template上设置style="display:none"
3. template中只能有一个根元素
代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />
<title>组件化</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<template id="one" style="display: none;">
<div>
<h1>你好,世界!!1</h1>
<h1>你好,世界!!2</h1>
</div>
</template>
<div id="app">
<child-one></child-one>
<child-one></child-one>
</div>
<script>
Vue.component('childOne', {
data () {
return {
inputValue: '',
num: 0
}
},
// template: `<div>
// <h1>ChildOne</h1>
// <input type="text" v-model="inputValue" />
// <h1>输入的内容:{{inputValue}}</h1>
// <button @click="addNum">按钮</button>
// <h1>{{num}}</h1>
// </div>`,
template: '#one',
methods: {
addNum () {
this.num++
}
}
})
new Vue({
el: '#app'
})
function myComponent (options) {
this.data = options.data()
}
const options = {
data () {
return {
x: 100
}
}
}
var a = new myComponent(options)
var b = new myComponent(options)
a.data.x = 200
console.log(b)
</script>
</body>
</html>
2.局部注册
var myComponent = {
template: "<div>组件模板内容</div>"
data () {
return {
// 数据
}
},
methods: {}
}
new Vue({
el: '',
components: {
组件名称: myComponent`
}
})
局部注册还有一个单文件组件的定义形式,在后续的项目中会学到
在HTML中使用 <组件名称></组件名称> 或者 <组件名称 />
如果组件定义时采取大驼峰法命名,模板全部小写,不同的单词之间使用短横线分隔
-
组件名不能与HTML标签重名(后期使用vue-cli可以打破该条规则)
-
组件名在vue中采取驼峰法命名,在HTML中采取短横线连接
eg: 在vue中定义一个名称为globalHeader的组件在HTML中使用
-
template的模板只能有一个根元素,可以使用字符串也可以使用template标签
-
data必须为函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<template id="header">
<div>
<h1>child-one----{{msg}}</h1>
<button @click="changeMsg">改变</button>
</div>
</template>
<div id="app">
<child-one></child-one>
</div>
<script>
/*
第三种注册方式
单文件组件 xxx.vue
*/
const childOneCmp = {
data () {
return {
msg: 'hello'
}
},
template: '#header',
methods: {
changeMsg () {
this.msg = '您好'
}
}
}
new Vue({
el: '#app',
components: {
ChildOne: childOneCmp
}
})
</script>
</body>
</html>
-
组件之间可以嵌套
const appCmp = { template: `<div> <h1>主页面</h1> <child-one></child-one> </div>`, // 嵌套组件 components: { // 组件只能在当前的组件的模板中使用 ChildOne: childOneCmp } } new Vue({ el: '#app', components: { App: appCmp } })
3.动态组件
在模板中使用 <component is="组件的名称"></component>
缓存组件
<keep-alive>
需要缓存的内容
</keep-alive>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />
<title>动态组件</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div class="tab">
<span @click="onTab('GoodsDetail')">图文详情</span>
<span @click="onTab('GoodsQuestion')">常见问题</span>
<span @click="onTab('GoodsComment')">评论</span>
</div>
<keep-alive>
<component :is="cmpName"></component>
</keep-alive>
</div>
<script>
const GoodsDetail = {
template: `<h1>图文详情</h1>`,
mounted () {
console.log('图文详情 mounted')
}
}
const GoodsQuestion = {
template: `<h1>常见问题</h1>`,
mounted () {
console.log('常见问题 mounted')
}
}
const GoodsComment = {
template: `<h1>评论</h1>`,
mounted () {
console.log('评论 mounted')
}
}
new Vue({
el: '#app',
data: {
cmpName: 'GoodsDetail'
},
components: {
GoodsDetail,
GoodsQuestion,
GoodsComment
},
methods: {
onTab (name) {
this.cmpName = name
}
}
})
</script>
</body>
</html>