前端学习--Vue(5)

一、动态组件

动态切换组件的显示与隐藏

1.1 组件

动态组件在被展示的时候被创建，隐藏的时候被销毁

如果想要组件被隐藏时不被销毁：

1.2 keep-alive

1.2.1 生命周期函数

activated() 激活组件

deactivated() 缓存组件

1.2.2 include属性

指定需要缓存的组件名称

二、插槽

2.1 概念

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

也就是说在自定义组件中间插入自定义内容，插槽本质是个占位符

如果不声明插槽，在自定义组件标签中插入的内容会被忽略

作用：让用户自定义组件内部UI结构

2.2 基本用法

App.vue

Left.vue

• v-slot的简写形式是#
• 插槽的默认内容（后备内容）可以包裹在中，即当用户没有指定内容时

2.3 具名插槽 

可以在不同的插槽指定不同的内容

Article.vue

App.vue

2.4 作用域插槽

可以通过对slot自定义属性值实现数据子传父

    //Article.vue
    

    //App.vue
    

在封装组件时，为预留的slot提供属性对应的值，这种用法叫作用域插槽 

三、自定义指令

3.1 概念

开发者自定义的指令

• 私有自定义指令 单个组件使用
• 全局自定义指令 多个组件使用

3.2 私有自定义指令

一般在directives节点下声明私有自定义指令

App 根组件
ppppp
 

directives:{
    //自定义指令
    color:{
      //当指令第一次被绑定到元素上,就会触发bind函数
      //el表示当前指令绑定到的dom对象
      bind(el, binding){
        console.log(binding)
        el.style.color = binding.value
      }
    }
  }

binding对象

expression是可以被解析的js表达式

value是直接被使用的值

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

App 根组件
ppppp
改颜色

directives:{
    //自定义指令
    color:{
      //当指令第一次被绑定到元素上,就会触发bind函数
      //el表示当前指令绑定到的dom对象
      bind(el, binding){
        el.style.color = binding.value
      },
      update(el, binding){
        el.style.color = binding.value
      }
    }
  }

 简写形式

directives:{
    //自定义指令
    color(el, binding){
      el.style.color = binding.value
    }
  }

3.3 全局自定义指令

用Vue.directive()在main.js中声明

Vue.directive('color', function(el, binding){
  el.style.color = binding.value
})