目录
一、插槽
1.默认插槽
2.具名插槽
3.作用域插槽
二、自定义指令
全局注册自定义指令
执行一次性初始化设置
组件vnode更新触发
局部注册自定义指令
一、插槽
父组件传递模板给子组件，子组件使用插槽声明slot元素承载分发内容出口。
1.默认插槽
父组件提供给子组件模板，默认会填充到默认插槽中
slot不设置name会隐式创建一个name为default的插槽
<slot name='default'></slot>2.具名插槽
父组件提供了具体的模板，填充到具名插槽中
指定模板填充到具名插槽中 v-slot绑定具名插槽名称 可以简写为#
<template v-slot:header></template><slot name='header'></slot>默认插槽和具名插槽的使用：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body><div id="app"><my-child><div>我是父组件提供的模板{{msg}}</div><img width="150px" src="../../Axure/swipe/1.jpeg" alt=""><!-- <template v-slot:header> --><template #header><div>我是头部的内容</div></template><template v-slot:footer><div>我是底部的内容</div></template></my-child></div><script>let myChild = {data(){return {child:'我是子组件',user:{firstName:'zhao',lastName:'terry'}}},template:`<div>{{child}}<slot name='default'></slot> <header><slot name='header'></slot> </header><footer><slot name='footer'></slot> </footer></div>`}new Vue({el:"#app",// 局部注册组件components:{'my-child':myChild},data:{msg:'hello vue2'},methods:{}})</script>
</body>
</html>
3.作用域插槽
父组件作用域使用子组件数据
父级作用域模板中获取子组件中数据 子组件向父组件传值 第二种方式
1.在子组件默认插槽中动态绑定插槽prop
<slot v-bind:user='user'>2.在父组件模板中使用v-slot='插槽prop'接收子组件数据
<template v-slot='scope'>{{scope.user.xxxx}}</template><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body><div id="app"><my-child><template v-slot="scope"><div>{{scope.user.lastName}}</div></template></my-child></div><script>/*** 作用域插槽：* 父级作用域模板中获取子组件中数据 子组件向父组件传值 第二种方式* 1.默认插槽使用v-bind绑定插槽prop* 2.在父组件作用域中使用v-slot接收插槽prop*/let myChild = {data(){return {child:'我是子组件',user:{firstName:'zhao',lastName:'terry'}}},template:`<div>{{child}}<slot v-bind:user='user'>{{user.firstName}}</slot></div>`}new Vue({el:"#app",// 局部注册组件components:{'my-child':myChild},data:{msg:'hello vue2'},methods:{}})</script>
</body>
</html>
二、自定义指令
v-xxx
全局注册自定义指令
Vue.directive('指令名称',{当被绑定元素插入到父节点调用inserted(el,binding,vnode,oldNode){el---->绑定指令dom元素binding---->元素数据 valuevnode 虚拟节点 dom对象内存中数据表示}, // 注册自定义指令Vue.directive('focus',{// 指令绑定dom元素执行钩子函数 调用一次bind(el,binding,vnode){console.log(el,binding);el.style.backgroundColor = binding.value;},// 当被绑定元素插入到父节点中inserted(el,binding,vnode){// console.log(el,binding,vnode,'2222');el.focus();}})
执行一次性初始化设置
bind(el,binding,vnode,oldNode){}组件vnode更新触发
update(el,binding,vnode,oldNode){}})局部注册自定义指令
// 局部注册自定义指令directives:{myshow:{inserted(){},bind(el,binding){el.innerHTML = binding.value;},// 指令所在组件更新vnode调用update(el,binding,vnode){console.log(el,binding,vnode,'4444');el.innerHTML = binding.value;}}},
)
