Vue组件知识总结

本文目录：

• 1.什么是组件？
• 2.将组件分离出来-单文件组件
• 3.组件生命周期钩子函数
• 4.slot
• 5.v-slot

1.什么是组件？

理解组件

前端组件化开发是目前非常流行的方式，什么是前端组件化开发呢？就是将页面的某一部分独立出来，将这一部分的数据、视图、以及一些控制逻辑封装到一个组件内部，暴露一些开箱即用的函数或者属性供外部组件调用。这种组织代码的开发方式我们称为组件化开发。通俗的说，我们需要把一个页面拆分成若干的小单元，每个小单元就是一个小组件。
组件开发的最大好处就是可以复用代码。
在vue中，所有的 Vue 组件同时也都是 Vue 的实例，所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。Vue组件带有一个名字，在根实例中，组件被定义为元素使用,下面我们来定义一个button计数器组件

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 <button-counter>。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：

<div id="components-demo">
  <button-counter></button-counter>
</div>

new Vue({ el: '#components-demo' })

data必须是一个函数

当我们定义这个 <button-counter> 组件时，你可能会发现它的 data 并不是像这样直接提供一个对象：

data: {
  count: 0
}

取而代之的是，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：

data: function () {
  return {
    count: 0
  }
}

2.将组件分离出来-单文件组件

在上面vue组件的学习的时候，我们使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素，这种方式在小规模项目中可以运行的很好，但在复杂的项目中就会有很多缺点，因此，我们需要学习并使用单文件组件。

什么是单文件组件？

通俗的说单文件组件就是每个文件就是一个组件，把不同的组件放到不同的文件中去，这种文件以.vue结尾
单文件组件结构

<template>
  <div class="page">
    {{message}}我是首页
  </div>
</template>
<script type="text/ecmascript-6">
export default {
  data () {
    return {
      message: 'hello, '
    }
  },
}
</script>
<style scoped>
//scoped可以让css只能在组件内部生效
</style>

实战演练

需求：使用单文件组件完成下图页面

微信截图_20191122113249.png

在用vue-cli创建的项目文件夹中的src目录下写代码
1.在src目录下的components目录下新建MyHeader.vue文件,添加下面内容

<template>
  <div class="page">
      {{ title }}
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data () {
    return {
      title: '这是网页头部'
    }
  }
}
</script>
<style>
</style>

2.重复上一步，分别添加MyContent.vue文件和MyFooter文件
MyContent.vue

<template>
  <div class="page">
      {{message}}
  </div>
</template>
<script type="text/ecmascript-6">
export default {
  data () {
    return {
      message: '这里是主体内容'
    }
  }
}
</script>
<style scoped>
</style>

MyFooter

<template>
  <div class="page">
      {{message}}
  </div>
</template>
<script type="text/ecmascript-6">
export default {
  data () {
    return {
      message: '这里是底部内容'
    }
  }
}
</script>
<style scoped>
</style>

3.在src/App.vue文件中添加内容

<template>
  <div class="page">
      <router-view></router-view>
      <my-header></my-header>
      <my-content></my-content>
      <my-footer></my-footer>
  </div>
</template>
<script type="text/ecmascript-6">
import MyHeader from '@/components/MyHeader'
import MyContent from '@/components/MyContent'
import MyFooter from '@/components/MyFooter'
export default {
  data () {
    return {
      name: 111
    }
  },
  components: {
    MyHeader,
    MyContent,
    MyFooter
  }
}
</script>
<style scoped>
</style>

@：build文件夹中webpack.base.config.js中的function resolve(dir){ ... }规定好的一个路径，还有一个使用规定了该路径的使用形式是符号@

4.运行查看效果
在终端里面执行命令
npm start

3.组件生命周期钩子函数

__1.beforecreate : __
完成实例初始化，初始化非响应式变量
this指向创建的实例；
可以在这加个loading事件；
data computed watch methods上的方法和数据均不能访问
2.created
实例创建完成
完成数据(data props computed)的初始化 导入依赖项。
可访问data computed watch methods上的方法和数据
未挂载DOM,不能访问ref为空数组
可在这结束loading，还可以做一些初始化，实现函数自执行,
可以对data数据进行操作，可进行一些ajax请求，请求不易过多，避免白屏时间太长。
若在此阶段进行的 DOM 操作一定要放在 Vue.nextTick() 的回调函数中
3.berofeMount
有了el,编译了template|/outerHTML
能找到对应的template,并编译成render函数
此时页面并没有内容
4.mounted
完成创建vm.ref
可在这发起后端请求，拿回数据，配合路由钩子做一些事情；
可对DOM 进行操作
5.beforeUpdate
数据更新之前
可在更新前访问现有的DOM,如手动移除添加的事件监听器；
6.updated :
完成虚拟DOM的重新渲染和打补丁；
组件DOM 已完成更新；
可执行依赖的dom 操作
注意：不要在此函数中操作数据，会陷入死循环的。
7.activated:
在使用vue-router时有时需要使用<keep-alive></keep-alive>来缓存组件状态，这个时候created钩子就不会被重复调用了，
如果我们的子组件需要在每次加载的时候进行某些操作，可以使用activated钩子触发
__8.deactivated __
keep-alive 组件被移除时使用
keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，避免重新渲染.
__9.beforeDestroy： __
在执行app.$destroy()之前
可做一些删除提示，如：你确认删除XX吗？
可用于销毁定时器，解绑全局时间 销毁插件对象
10.destroyed ：
当前组件已被删除，销毁监听事件 组件 事件 子实例也被销毁
这时组件已经没有了，无法操作里面的任何东西了。
11. errorCaptured
当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

4.slot

首先说说slot

vue里提供了一种将父组件的内容和子组件的模板整合的方法：内容分发，通过slot插槽来实现。

在组件标签内部写入的内容默认的会被替换掉，如果想要在组件的模板里使用这些内容，就在对应的位置写上slot标签，这个slot标签就代表着这些内容。

匿名插槽

在父组件中使用子组件的时候，在子组件标签内部写的内容，在子组件的模板中可以通过<slot></slot>来使用

<div id = "app">
    <aaa>
        <h3>slot槽口插入的内容</h3>
    </aaa>
</div>

<template id="aaa">
    <div class = "aaa">
        <slot></slot>
        <p>我是aaa组件</p>
    </div>
</template>

具名插槽

父组件在子组件标签内写的多个内容我们可以给其设置slot属性来命名，在子组件的模板通过使用带有name属性的slot标签来放置对应的slot，当slot不存在的时候，slot标签内写的内容就出现。

slot上面通过name属性指定槽口名称，然后使用的时候通过slot="槽口名称"。

<div id = "app">
    <aaa>
        <!-- <h3>slot槽口插入的内容</h3> -->
        <p slot = "s1">在上面的内容</p>
        <p slot = "s2">在下面的内容</p>
    </aaa>
</div>

<template id="aaa">
    <div class = "aaa">
        <slot name = "s1"></slot>
        <p>我是aaa组件</p>
        <slot name = "s2"></slot>
    </div>
</template>

slot插槽让我们在原有模版的基础上，定制更加多样化的组件。

作用域插槽

当我们想在父组件中访问子组件内部的一些数据时，就需要在子组件内部的<slot>元素上动态绑定一个自定义属性，将数据传递到自定义属性上，通过slot传递给父组件使用。
<slot :teacher="teacher"></slot>
绑定到<slot>元素上的属性我们称之为slot props。现在，在父组件中我们可以通过slot-scope给包含所有插槽 prop 的对象命名为prop，之后就可以通过prop来使用子组件中的数据了。

<template slot-scope="prop">
      老师姓名：{{prop.teacher.name}} 老师年龄：{{prop.teacher.age}}
</template>

slot总结

• 在组件内部任意地方使用 <slot name='value'></slot> 标签挖坑.
• 挖坑语法(子组件定义): <slot name='slotname'>默认值</slot>
• 填坑语法(父组件使用): <div slot='slotname'>任意内容(字符串,数据,其他组件等)</div> .. 注意,使用方法是<div slot> 而不是 <slot>
• 最重要的是,我们可以利用slot,事先不建立组件和组件之间的依赖关系,完全利用 slot 这个抽象层,把坑挖好即可.

5.v-slot

v-slot 指令自 Vue 2.6.0 起被引入，提供更好的支持 slot 和 slot-scope 特性的 API 替代方案。在接下来所有的 2.x 版本中slot 和 slot-scope 特性仍会被支持，但已经被官方废弃，且不会出现在 Vue 3 中。

现在我们使用 v-slot 重构代码：

匿名插槽

<a v-slot:default="prop">
      老师姓名：{{prop.teacher.name}} 老师年龄：{{prop.teacher.age}}
</a>

<div class = "aaa">
     <slot :teacher="teacher"></slot>
</div>

一个不带 name 的 <slot> 出口会带有隐含的名字“default”，使用时可以简化为v-slot:default="prop“。

具名插槽

子组件中通过name属性给槽口设定名称

<slot name="student" :student='student'></slot>

父组件中通过v-slot:名称的方式来使用具名槽口

<template v-slot:student="prop">
      学生姓名：{{prop.student.name}} 学生年龄：{{prop.student.age}}
</template>

作用域插槽

通过v-slot:插槽名=“变量名”的形式将子组件slot上的所有属性接收为一个集合。
父页面

<todo-list>
 <template v-slot:todo="slotProps" >
   {{slotProps.user.firstName}}
 </template> 
</todo-list> 

slotProps 可以随意命名
slotProps 接取的是子组件标签slot上属性数据的集合所有v-bind:user="user"以及v-bind:test="test"

子组件

<slot name="todo" :user="user" :test="test">
    {{ user.lastName }}
 </slot> 
data() {
    return {
      user:{
        lastName:"Zhang",
        firstName:"yue"
      },
      test:[1,2,3,4]
    }
  },