Vue 插槽
Vue 的插槽其实不是很难 , 只要小伙伴们将下面的知识学会 , 相信你可以灵活掌握它 ❤
如果文档中有些内容你不懂的话 , 也可以留言给我 , 只要是我会的 , 必定倾囊相授 ❤
1. 插槽一定是使用在子组件中的
2 插槽的作用 : 就是将父组件中的子组件模板数据拿到然后显示在页面
案例一
// 这是new Vue的实例
<div id="app">
<h1>这是父组件</h1>
// 存放在父组件中的子组件模板
<child>
<div>菜单一</div>
<div>菜单二</div>
<div>菜单三</div>
</child>
</div>
// 使用子组件
<template id="child">
// 只能存在一个根路径
<div>
<h2>这是子组件</h2>
// slot是内置的组件 , 只有添加slot才能在页面看到父组件中child标签中的数据
<slot></slot>
</div>
</template>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
// 创建child子组件
let child = {
// 使用# id名进行关联
template:"#child"
}
// Vue的实例
let vm = new Vue({
el:"#app",
data:{
},
// 注册组件
components:{
child
}
})
</script>
不加 ( slot ) 的页面 :
加 ( slot ) 渲染到页面的结果 :
具名插槽
1 . 具名插槽就是在父组件中的子组件标签上添加行间属性 ( slot ) , 并且在子组件中的 ( slot ) 组件上加行间属性 name , 属性值和父组件中的 ( slot ) 属性值进行匹配 , 按照顺序显示对应的模板数据
2 . 如果父组件中一部分子组件没有添加行间属性 ( slot ) , 这一部分子组件就是父组件的默认插槽 , 那么子组件中的 ( slot ) 就会直接使用父组件中的默认插槽部分
案例二
<div id="app">
<h1>这是父组件</h1>
<child>
// 在此添加行间属性 slot
<div slot="first">菜单一</div>
<div>菜单二</div>
<div slot="third">菜单三</div>
</child>
</div>
<template id="child">
<div>
<h2>这是子组件</h2>
// 如果slot没有name属性,那么会默认把父组件中没有slot属性的都显示出来
<slot></slot>
<slot name="first"></slot>
</div>
</template>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let child = {
template:"#child"
}
let vm = new Vue({
el:"#app",
data:{
},
components:{
child
}
})
</script>
具名插槽 不加 name 属性的结果 :
具名插槽 加 name 属性的结果 :
默认的插槽会在第一位置显示
如果你想要打乱顺序 , 那么可以参照下面的方法
<div id="app">
<h1>这是父组件</h1>
<child>
<div slot="first">菜单一</div>
<div>菜单二</div>
<div slot="third">菜单三</div>
// 你也可以给同一个名字添加不同的东西
<div slot="first">菜单四</div>
</child>
</div>
<template id="child">
<div>
<h2>这是子组件</h2>
<slot></slot>
// 你可以随意调换顺序 , 使它们以你想要的方式呈现在页面中
<slot name="third"></slot>
<slot name="first"></slot>
</div>
</template>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let child = {
template: "#child"
}
let vm = new Vue({
el: "#app",
data: {},
components: {
child
}
})
</script>
效果如下 :
作用域插槽
1 . 父组件中的数据都会在父级作用域中进行编译 , 子组件中的数据都会在子级作用域中进行编译
2 . 作用域插槽 : 解决了父组件可以调用子组件中的数据
3 . 首先 , 先在子组件中的 ( slot ) 组件上添加 :user="user" ( 前者与后者的名字须相同 )
用来传递数据 ; 其次 , 我们要在父组件中使用 slot-scope="自定义名字" ( 此处自定义的名字须与小胡子语法中的 属性名.属性值 的属性名保持一致 )
, 这样才能使父组件可以得到子组件的数据
<div id="app">
<child>
<!--slot-scope:的属性是自定义-->
<div slot-scope="use">
{{use.user}}
</div>
</child>
</div>
<template id="child">
<div>
<h3>这是子组件</h3>
// slot的传递数据必须是属性名和属性值必须相同的
<slot :user="user"></slot>
</div>
</template>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let child = {
template:"#child",
data(){
return {user:["你好","我好","大家好"]}
}
};
let vm = new Vue({
el:"#app",
data:{
},
components:{
child
}
});
</script>
作用域插槽 渲染到页面的效果 :