目录
父组件传递模板给子组件，子组件使用插槽声明slot元素承载分发内容出口。
父组件提供给子组件模板，默认会填充到默认插槽中
slot不设置name会隐式创建一个name为default的插槽
<slot name='default'></slot>父组件提供了具体的模板，填充到具名插槽中
指定模板填充到具名插槽中 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>
父组件作用域使用子组件数据
父级作用域模板中获取子组件中数据 子组件向父组件传值 第二种方式
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---->元素数据 value
vnode 虚拟节点 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){
}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;
}
}
},