<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>slot插槽</title>
</head>
<body>
<div id="app">
<my-component>
<p>vue</p>
</my-component>
<my-component1>
<p slot="p1">p1</p>
<p slot="p2">p2</p>
</my-component1>
</div>
</body>
<script src="vue.js"></script>
<script>
//匿名插槽
Vue.component("my-component",{
template:"<div><slot></slot></div>"
})
//具名插槽
Vue.component("my-component1",{
template:"<div><slot name='p1'></slot><slot name='p2'></slot></div>"
})
let vm = new Vue({
el:"#app"
})
</script>
</html>
学习下vue的slot插槽
原创
©著作权归作者所有:来自51CTO博客作者Vam的金豆之路的原创作品,请联系作者获取转载授权,否则将追究法律责任
上一篇:解决死锁——银行家算法透析
下一篇:关于防抖与节流的应用方案
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
vue 插槽slot插槽 slot
-
15 VUE学习:插槽slot
如果我们将这个概念拓展一下,可以想象的是,一些组件可能只包括了逻辑而不需要自己渲染内容,视图输出通过作用域插槽全权交给了
vue.js 学习 前端 插槽 作用域 -
vue的slot插槽
默认插槽组件中的标签体内容。标签体内容放在哪里,需要定义一个插槽。具名插槽我们需要使
vue.js 前端 插槽 作用域 赋值 -
[vue] slot插槽 默认插槽,具名插槽,作用域插槽
文章目录插槽不使用插槽效果分析默认插槽效果分析具名插槽效果分析作用域插槽效果
vue.js 插槽 App 作用域 -
Vue中的Ajax②(slot插槽)
我们现在有一个需求:代码:App组件:Category组件现在我们有一的,所以说如果我们想控制img、ul、video的样式,我们完全可以把他们写在App组件中默
vue.js 前端 javascript 插槽 ide