组件
组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型、独立和通常可复用的组件构建大型应用。组件是可复用的 Vue 实例。
1.局部注册
new Vue({
el...
components:{
组件名称:{
template:"组件的模板内容"
}
}
})
使用:
在挂载点内以<组件名>这样的方式来使用组件,在挂载点内组件名称的地方,vue解析之后就会把组件的template模板中的内容展示出来。
2.全局注册
局部注册的组件仅能在当前实例的挂载点内使用,如果需要在多个vue实例中使用同一个组件,就需要使用全局注册的方式来注册这个组件。
语法:
Vue.component('组件名',{template:"模板内容"})
new Vue({})
new Vue({})
...
3.注意事项
(1)Do not use built-in or reserved HTML elements as component id: div
不能使用系统内置的标签名作为组件名
组件名称使用系统内置的名字全大写也不行,浏览器会把大写字母解析成小写
(2)Unknown custom element: - did you register the component correctly?
组件未正确的注册就使用了
如果组件名称中确实包含大写字母,在使用组件时,要把大写字母换成-小写字母
(3)Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
组件的template中只能有一个根标签。
4.template的使用
vue中提供了一个template标签,它和其中的内容不会被浏览器直接解析出来。
因为组件的template属性使用字符串方式进行编写,没有语法提示,编写起来不方便且不容易维护,所以我们可以把template属性和template标签结合起来使用。
<div id="app">
<one></one>
<two></two>
</div>
<template id="one">
<div>
<h2>这是one组件的内容</h2>
<p>这是一个段落</p>
</div>
</template>
<template id="two">
<div>
<h3>这是two组件</h3>
</div>
</template>
<script>
new Vue({
el:"#app",
components:{
one:{
// 告知当前组件的template属性使用哪个template标签中的内容作为模板内容
template:"#one"
},
two:{
template:"#two"
}
}
})
</script>
5.组件中的data要是一个函数
受数据类型的影响,对象类型数据复用时,会影响数据的变化,在组件中定义data时,不能使用对象类型,要使用函数,在函数中返回一个新的对象,这样在复用组件时,每使用一次就会返回一个新的对象空间来存储数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>template的使用</title>
<script src="../../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 直接使用vue根实例上的数据 -->
<p>数量:{{ num }}<button @click="num++">增加</button></p>
<p>数量:{{ num }}<button @click="num++">增加</button></p>
<p>数量:{{ num }}<button @click="num++">增加</button></p>
<hr>
<!-- 复用组件 -->
<v-count></v-count>
<v-count></v-count>
<v-count></v-count>
</div>
<template id="count">
<p>数量:{{ num }}<button @click="num++">增加</button></p>
</template>
<script>
var vCount = {
template:"#count",
data(){
return{ num:100 }
}
}
new Vue({
el:"#app",
components:{ vCount},
data:{ num:100 }
})
</script>
</body>
</html>