组件化开发--插槽、具名插槽的使用
1、设置子组件
let Child = { template:'#hi' }
2、在父组件中申明Child
let vm = new Vue({
el: '#app',
data: {
msg: 'hello',
uname: '小王',
age: 18
},
components: {
Child
}
})
3、在父组件中设置使用child组件
<div id="app">
<Child></Child>
</div>
4、在父组件中申明具名插槽
<div id="app">
<Child>
<!-- 具名插槽 -->
<p slot="msg">{{msg}}</p>
<p slot="uname">{{uname}}</p>
<p slot="age">{{age}}</p>
</Child>
</div>
5、在子组件中设置插槽
插槽一定是子组件视图层里的内容
子组件里面slot的特点:
1、没有内容传递过去的时候会显示插槽的(默认)内容
2、有内容传递过来的时候,不会显示插槽的(默认)内容
<template id="hi">
<div>
<p>子组件</p>
<slot name="msg">我是插槽1</slot>
<slot name="uname">我是插槽2</slot>
<slot name="age">我是插槽3</slot>
</div>
</template>
(1)父组件中设置具名插槽或者没有内容,子组件中的插槽slot标签中没有设置相关name,他会默认显示插槽里的内容
(2)父组件中不设置具名插槽,子组件不设置name属性,直接使用date里的数据,他会默认显示插槽默认的内容:
(3)父组件设置了具名插槽,子组件设置了name属性,代码演示:
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果