Vue学习:使用插槽、作用域插槽与动态组件
一、插槽
1.1 使用场景
当希望子组件初了展现p标签之外,还需要展示一段内容,但这段内容不是我子组件所决定的,而是父组件传递过来的
<body>
<div id="app">
<child></child>
<child></child>
</div>
</body>
<script>
Vue.component('child',{
template:'<div><p>hello</p></div>',
})
var vm = new Vue({
el:"#app",
})
</script>
1.2 使用属性形式
content里面的p标签会被转移直接显示,需要借助div标签
<body>
<div id="app">
<child content='<p>Derrick</p>'></child>
</div>
</body>
<script>
Vue.component('child',{
props:['content'],
template:'<div><p>hello</p><div v-html="content"></div></div>',
})
var vm = new Vue({
el:'#app'
})
</script>
1.3 使用插槽传递DOM结构
直接在子组件里面放入需要展示的标签
<child>
<p>Derrick</p>
</child>
然后在template中使用<slot></slot>便是<p>Derrick</p>
<body>
<div id="app">
<child>