Vue2随笔分享(下)

九、生命周期&数据共享

钩子函数

Vue生命周期函数 也叫Vue生命周期钩子，就是Vue实例在某一时间点自动执行的函数

函数	调用时间
beforeCreate	vue实例初始化之前调用
created	vue实例初始化之后调用
beforeMount	挂载到DOM树之前调用
mounted	挂载到DOM树之后调用
beforeUpdate	数据更新之前调用
updated	数据更新之后调用
beforeDestory	vue实例销毁之前调用
destoryed	vue实例销毁之后调用

created:

发起Ajax最早的时机，请求数据

mounted:

组件第一次渲染到浏览器中

操作DOM的最早的时机

updated:

能够操作到最新的DOM元素

生命周期（Life Cycle）是指一个组件从创建 -> 运行 -> 销毁的整个阶段，强调的是一个时间段。

生命周期函数：是由 vue 框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行。

注意：生命周期强调的是时间段，生命周期函数强调的是时间点

十、组件间的关系

set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve

1.在项目开发中，组件之间的最常见的关系分为如下两种：

① 父子关系

② 兄弟关系

2.组件之间的数据共享

2.1 父组件向子组件共享数据 自定义属性

子组件 通过props 进行自定义属性。父组件 负责把数据 通过v-bind: 绑定给子组件

2.2 子组件向父组件共享数据 自定义事件

子组件调用this.$emit()来触发自定义事件(参数1:字符串，表示自定义事件的名称 参数2:值，要发送父组件的数据)

父组件通过v-on: 来调用自定义事件，并提供一个事件处理函数，通过事件处理函数的形参，接收到子组件传递过来的数据

2.3 兄弟组件之间的数据共享 EventBus

EventBus 的使用步骤

① 创建 eventBus.js 模块，并向外共享一个 Vue 的实例对象

② 在数据发送方，调用 bus.$emit('事件名称', 要发送的数据) 方法触发自定义事件

③ 在数据接收方，调用 bus.$on('事件名称', 事件处理函数) 方法注册一个自定义事件

十一.ref引用

ref 用来辅助开发者在不依赖于 jQuery 的情况下，获取 DOM 元素或组件的引用。

每个 vue 的组件实例上，都包含一个 $refs 对象，里面存储着对应的 DOM 元素或组件的引用。默认下， 组件的 $refs 指向一个空对象。

1.使用ref引用DOM元素

<template>
  <div class="app-container">
    <h1 ref="myh1">App 根组件</h1>
    <button @click="showref">打印 this</button>
    <hr/>
  </div>
</template>
<script>
export default {
  methods:{
    showref(){
      //当前vue组件的实例对象
      //console.log(this.$refs.myh1);//获取到DOM
      this.$refs.myh1.style.color='blue'
    }
​
  }
}
</script>

2.使用ref引用组件实例

<template>
  <div class="app-container">
    <h1 ref="myh1">App 根组件</h1>
    <button @click="showref">打印 this</button>
    <button @click="resetleft">重置left组件count</button>
    <hr/>
    <Left ref="comleft"></Left>
  </div>
</template>
<script>
import Left from '@/components/Left.vue'
export default {
  methods:{
    showref(){
      //当前vue组件的实例对象
      //console.log(this.$refs.myh1);//获取到DOM
      this.$refs.myh1.style.color='blue'
    },
   //重置left组件的count
    resetleft(){
      this.$refs.comleft.count=0
    }
  },
  components:{
    Left
  }
}
</script>

当文本框展示出来之后，如果希望它立即获得焦点，则可以为其添加 ref 引用，并调用原生 DOM 对象的 .focus() 方法即可

3.this.$nextTick(cb) 方法

组件的 $nextTick(cb) 方法，会把 cb 回调推迟到下一个 DOM 更新周期之后执行。通俗的理解是：等组件的 DOM 更新完成之后，再执行 cb 回调函数。从而能保证 cb 回调函数可以操作到最新的 DOM 元素。

十二.动态组件

1.动态组件指的是动态切换组件的显示与隐藏

2.如何实现动态组件渲染

vue 提供了一个内置的 组件，专门用来实现动态组件的渲染

3.使用 keep-alive 保持状态

默认情况下，切换动态组件时无法保持组件的状态。此时可以使用 vue 内置的 组件保持动态组 件的状态

<template>
  <div class="app-container">
    <h1>App 根组件</h1>
    <hr />
​
    <button @click="comName = 'Left'">展示 Left</button>
    <button @click="comName = 'Right'">展示 Right</button>
​
    <div class="box">
      <!-- 渲染 Left 组件和 Right 组件 -->
      <!-- 1. component 标签是 vue 内置的，作用：组件的占位符 -->
      <!-- 2. is 属性的值，表示要渲染的组件的名字 即组件在 components 节点下的注册名称 -->
​
      <!-- keep-alive 会把内部的组件进行缓存，而不是销毁组件 -->
      <!-- 可以通过 include 指定哪些组件需要被缓存;多个的话,用英文的逗号隔开或通过 exclude 属性指定哪些组件不需要被缓存；-->
      <!-- 但是,不要同时使用 include 和 exclude 这两个属性 -->
      <keep-alive exclude="MyRight">
        <component :is="comName"></component>
      </keep-alive>
    </div>
  </div>
</template>
​
<script>
import Left from '@/components/Left.vue'
import Right from '@/components/Right.vue'
​
export default {
  data() {
    return {
      //大小写频繁切换 shift键
      // comName 表示要展示的组件的名字
      comName: 'Left'
    }
  },
  components: {
    // 如果在“声明组件”的时候，没有为组件指定 name 名称，则组件的名称默认就是“注册时候的名称”
    Left,
    Right
  }
}
</script>

4.keep-alive 对应的生命周期函数

当组件被缓存时，会自动触发组件的 deactivated 生命周期函数

当组件被激活时，会自动触发组件的 activated 生命周期函数

5.keep-alive 的 include 属性 反义exclude

include 属性用来指定：只有名称匹配的组件会被缓存。多个组件名之间使用英文的逗号分隔

十三.插槽 自定义指令

1.定义

插槽（Slot）是 vue 为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的 部分定义为插槽

可以把插槽认为是组件封装期间，为用户预留的内容的占位符 就是组件标签的内容区域

2.插槽的基础用法

在封装组件时，可以通过<slot>元素定义插槽，从而为用户预留内容占位符

2.1 没有预留插槽的内容会被丢弃

如果在封装组件时没有预留任何<slot>插槽，则用户提供的任何自定义内容都会被丢弃

2.2 后备内容（默认内容）

封装组件时，可以为预留的 插槽提供后备内容（默认内容）。如果组件的使用者没有为插槽提供任何 内容，则后备内容会生效

在外部没有提供任何内容的情况下，可以为插槽指定默认内容，定义在子组件的<slot> </slot>内容里面

父组件代码:

<Left>
        <!-- 默认情况下，在使用组件的时候，提供的内容都会被填充到名字为 default 的插槽之中 -->
        <!-- 1. 如果要把内容填充到指定名称的插槽中，需要使用 v-slot: 这个指令 -->
        <!-- 2. v-slot: 后面要跟上插槽的名字 指令的简写形式是 #  -->
        <!-- 3. v-slot: 指令不能直接用在元素身上，必须用在 template 标签上 -->
        <!-- 4. template 这个标签，它是一个虚拟的标签，只起到包裹性质的作用，但是，不会被渲染为任何实质性的 html 元素 -->
        <template #default>
          <p>这是在 Left 组件的内容区域，声明的 p 标签</p> //属于用户提供的任何自定义内容
        </template>
      </Left>

​
子组件代码:

<slot name="default">
      <h6>这是 default 插槽的后备内容</h6>
</slot>

3.具名插槽

如果在封装组件时需要预留多个插槽节点，则需要为每个 插槽指定具体的 name 名称。这种带有具体 名称的插槽叫做“具名插槽”

3.1 为具名插槽提供内容

BaseLayout组件内容:
​
<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称。
​
要为具名插槽传入内容，我们需要使用一个含 v-slot 指令的 <template> 元素，并将目标插槽的名字传给该指令
<BaseLayout>
  <template v-slot:header>
    <!-- header 插槽的内容放这里 -->
  </template>
</BaseLayout>

3.2 具名插槽的简写

跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header

4.作用域插槽

在封装组件的过程中，可以为预留的 <slot> 插槽绑定 props 数据，这种带有 props 数据的 <slot> 叫做“作用域插槽”。

4.1使用作用域插槽
可以使用 v-slot: 的形式，接收作用域插槽对外提供的数据
4.2 解构插槽 
作用域插槽对外提供的数据对象，可以使用解构赋值简化数据的接收过程
<template>
<div>
<!-- 在封装组件时，为预留的 <slot> 提供属性对应的值，这种用法，叫做 “作用域插槽” -->
      <slot name="content" msg="hello vue.js" :user="userinfo"></slot>
    </div>
</template>
​
<script>
export default {
  // 首字母要大写
  name: 'Article',
  data() {
    return {
      // 用户的信息对象
      userinfo: {
        name: '亚里士多德',
        age: 20
      }
    }
  }
}
</script>
​
<template #content="{ msg, user }">
        <div>
          <p>假如生活欺骗了你？</p>
          <p>不要悲伤 不要心急？</p>
          <p>啊忧郁的日子里须要镇静</p>
          <p>{{ msg }}</p>
          <p>{{ user.name }}</p>
        </div>
</template>

5.自定义指令

bind函数只调用一次；当指令第一次绑定到元素时调用，当DOM元素更新时bind函数不会被触发，update函数会在每次DOM更新时被调用

// 私有自定义指令的节点
  directives: {
    //定义名为 color 的指令，指向一个配置对象
    // color: {
    //   // 当指令第一次被绑定到元素上的时候，会立即触发 bind 函数 只调用一次
    //   // 形参中的 el 表示当前指令所绑定到的那个 DOM 对象
    //   bind(el, binding) {
    //     console.log('触发了 v-color 的 bind 函数')
    //     el.style.color = binding.value
    //   },
    //   //在 DOM 更新的时候，会触发 update 函数
    //   update(el, binding) {
    //     console.log('触发了 v-color 的 update 函数')
    //     el.style.color = binding.value
    //   }
    // } 
    color(el, binding) {
      el.style.color = binding.value
    }
  }

全局自定义指令

// 全局自定义指令
/* Vue.directive('color', {
  bind(el, binding) {
    el.style.color = binding.value
  },
  update(el, binding) {
    el.style.color = binding.value
  }
}) */
​
Vue.directive('color', function(el, binding) {
  el.style.color = binding.value
})

欢迎大家指点评论~ 点赞+关注⭐⭐⭐