slot 插槽的基础使用

页面 A.vue

默认情况下，在使用组件的时候，提供的内容会被填充到名字为 default 的插槽中

<Left><p>这段话会被插入到Left组件的 slot 中</p></Left>

如果要把内容填充到指定名称的插槽中，需要用 v-slot 指令v-slot 后面要跟上插槽的名称v-slot 指令不能直接用在元素上，必须用 template 标签包裹v-slot 指令简写形式 #mySlot具名插槽可以接收一个组件传过来的数据，是一个对象

<Left><template #mySlot="obj"><!-- #mySlot='{ msg }' 可以直接解构出来 --><p>这段话会被插入到Left组件的 slot 中 {{obj.mag}}</p></template></Left>

组件 Left.vuevue 官方规定，每一个 slot 插槽都要有一个 name 属性，如果省略了 slot 的 name 属性，则有一个默认名称叫做 default 。msg 可以传值给父组件

<template><div><h3>Left组件</h3><slot>这是默认插槽的默认内容（后备内容）</slot><!-- msg 可以传值给父组件 --><slot name="mySlot" msg="我可以传给父组件"> </slot></div></template>

私有（局部）自定义指令

<!-- 给自定义指令传固定值的情况下，需要加双层引号 --><span v-color="'red'">我是自定义指令改变的颜色</span>

1.directives 之 bind 函数

定义名为 color 的指令，指向一个配置对象当指令第一次被绑定到元素上的时候，会立即出发 bind 函数形参中的 el 表示当前指令所绑定到的那个 DOM 对象

export default {directives:{color:{//定义名为 color 的指令，指向一个配置对象//当指令第一次被绑定到元素上的时候，会立即出发 bind 函数bind(el,binding){// 形参中的 el 表示当前指令所绑定到的那个 DOM 对象// el.style.color='red'el.style.color=binding.value}}}}

2.directives 之 update 函数

bind 函数只会触发一次（必须）update 函数在 DOM 更新时就会触发

export default{directives:{color:{bind(el,binding){el.style.color=binding.value},update(el,binding){el.style.color=binding.value}}}}

3.自定义指令简写形式

在 bind update 逻辑一样的情况下

export default{directives:{color(el,binding){el.style.color=binding.value}}}

全局自定义指令

在 main.js 中

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

简写形式（在 bind update 逻辑一样的情况下）

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