Vue.js 组件基础

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中，如果你想要重载一个组件，你可以通过更改component的key属性来强制重新渲染组件

6.组件的混入

• 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>