1.前言
- 本节讲述vue组件的基本格式以及实际开发的应用场景，本节内容兼容Vue2.x与Vue3.x
2.组件基础
- 组件的本质其实就是一个对象，这个对象包含多个属性，常见的属性有：template/data/methods/props/生命周期等
var some_component = {
'template':"<h3>{{name}}</h3>",
data:function(){
return {
name:'child'
}
},
props:{},
methods:{
},
computed:{
},
created(){
}
}
3.模板定义的替代品
- 通常情况下模版通过html字符串的形式复制给template属性，但是在js中拼接html字符串很不方便
- 内联模板：在子组件标签中添加inline-template属性，会使用标签内的html模版代替原来的模版，但是props参数依然要传入，内联模版无法直接读取父组件的数据
<my-component inline-template :propsA="valueA">
<div>
<p>{{propsA}}</p>
</div>
</my-component>
- X-Template:将html模版定义到script标签中，并通过id进行关联
<script type="text/x-template" id="hello-world-template">
<p>Hello hello hello</p>
</script>
Vue.component('hello-world', {
template: '#hello-world-template'
})
4.Vue 单文件组件 (SFC) 规范
- 实际开发中，用上面的写法来定义一个组件是不明智的，就拿template为例，需要拼接大量的html字符串，既不方便编写，也不便于维护
- 为了方便组件代码的封装复用，每一个组件对应一个vue文件，这个文件需要遵循 Vue 单文件组件 (SFC) 规范
- 每个 .vue 文件包含三种类型的顶级语言块 template、script 和 style，其中template负责HTML模板,script负责js脚本,style负责样式
- vue2.x只有一个根标签，vue3.x没有这个限制
<template>
<!-- vue2.x中只能有一个根标签 -->
<div>
<p>{{msg}}</p>
</div>
</template>
// lang表示所使用的CSS 预处理语言
// scoped表示里面的样式作用范围此局限在此组件中
<style lang="less" scoped>
p{
color:green
}
</style>
<script>
export default{
data(){
return{
msg:'hello wolrd'
}
},
methods:{
}
}
</script>
5.组件的混入
- Vue的混入功能支持将外部的数据或者逻辑注入到组件中，这些插入的数据或者逻辑会与组件本身的数据和逻辑进行合并
- 实际开发的用法为：将通用的数据或者方法进行封装，需要时进行引入并配置到组件中，这样的话即扩展了组件的功能，也减少组件本身的代码量，便于维护
- 在进行混入合并在过程中，有以下几个细节：
- 对于混入的生命周期钩子，混入对象的钩子将在组件自身钩子之前调用
- 对于data，methods，conputed，props，当他们的字段名产生冲突时，以组件本身的数据优先
<script>
//创建混入对象,用来给组件插入通用的数据或逻辑，包括data，props，methods，生命周期钩子等,这些插入的数据或者逻辑会与组件本身的数据和逻辑进行合并
//可以将通用的数据或者方法进行封装到单独某个文件中，需要时进行引入注册，从而减少代码量，便于维护
var mixin = {
data: function(){
return {
title:"混入的data数据"
}
},
created: function(){
console.log('我是混入的created钩子')
},
mounted:function(){
console.log('我是混入的mounted钩子')
},
methods:{
test(){
console.log('我是混入的方法')
}
}
}
var eChild = {
mixins: [mixin],
template:"<div>子组件1：{{typeof title == 'undefined'? '未定义title':title}}</div>",
data(){
return {
}
},
created(){
console.log('我是eChild的created')
},
mounted(){
console.log('我是eChild的mounted钩子')
},
}
var eChild2 = {
template:"<div>子组件2：{{typeof title == 'undefined'? '未定义title':title}}</div>",
data(){
return {
}
},
created(){
console.log('我是eChild2的created')
},
mounted(){
console.log('我是eChild2的mounted钩子')
},
}
var vm = new Vue({
el:"#app",
data(){
return {
}
},
components:{
eChild,eChild2
},
})
</script>
