为了使组件具有更多的扩展性,需要使用插槽,使用插槽的组件应为可复用的组件,若为不复用组件,则不应该使用插槽.
组件的复用
使用插槽:
<!--html-->
<div id="app">
<cpn>
<button>slot替换的内容写在这里</button>
</cpn>
<cpn>
<p>slot替换的内容写在这里</p>
</cpn>
</div>
定义插槽:
<template id="cpn">
<div>
<h2>title</h2>
<p>text</p>
<slot><p>这里放插槽的默认值</p></slot>
</div>
</template>
如果有多个标签写在html组件使用中则会全部替换
<cpn> <div>我会替换到slot</div> <p>我也会替换到slot</p> </cpn>
具名插槽
当使用多个插槽时,应给插槽添加name属性来命名:
<template id="cpn">
<div>
<h2>title</h2>
<p>text</p>
<slot name='main_title'><h1>这里放插槽的默认值</h1></slot>
<slot name='sub_title'><h2>这里放插槽的默认值</h2></slot>
<slot name ='text'><p>这里放插槽的默认值</p></slot>
<slot><p>这里放插槽的默认值</p></slot>
</div>
</template>
一个不带 name 的 <slot> 出口会带有隐含的名字“default”。
使用:
将要替换占位插槽的内容包裹在<template>中并添加v-slot属性来对应到slot的name
<div id="app">
<cpn>
<template v-slot='title'>
<h2>我替换了名为title的slot</h2>
</template>
<template>
<p>我替换了没有名字的(default)插槽</p>
</template>
</cpn>
<!--只有没有name属性的插槽会被替换-->
</div>
编译作用域
在vue中的html使用同级作用域,例如:
<body>
<div id="app">
<cpn v-show='isShow'></cpn>
</div>
</body>
<template id="cpn">
<div v-show='isShow'>
<p>text</p>
</div>
</template>
<script>
const cpn = Vue.component('cpn', { //使用组件构造器实例化一个组件
template: '#cpn',
data() {
return {
isShow:false
}
}
})
const app = new Vue({
el: '#app',
data: {
isShow:true
},
components:{
cpn //定义为子组件
}
})
</script>
这里cpn是ROOT的子组件,
<cpn>中的属性只能访问该模板(位于父组件<ROOT>的作用域下的data)下定义的属性,也就是定义在Vue()中的data.只有在标签内部(<p>这里是内部<p>)才能访问到本级作用域,标签中(<p v-bind:class='这里是标签中'></p>)的属性和标签同属于外级作用域,html中的作用域无法穿透本级作用域.div作为插槽若要访问cpn中的属性必须要定义在cpn的template中,若在<cpn>内部需要传递参数
图画的有问题,div作为插槽若要访问cpn中的属性必须要定义在cpn的template中,若在<cpn>内部需要传递参数
作用域插槽:
为了让games在父及作用域中可用,可以将games作为属性绑定到slot上,并在使用时的模板中添加v-slot:default='cpn_data',这时cpn_data是一个对象并且会包含绑定过的所有属性.
cpn_data
没有显示列表,因为替换了插槽.
join() 方法用于把数组中的所有元素放入一个字符串。 元素是通过指定的分隔符进行分隔的。
网友评论