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})