68
<div id="app">
<cpn></cpn>
<cpn>
<button>按钮</button>
</cpn>
<cpn>
<i>呵呵</i>
</cpn>
<cpn>
<h2>Bryant</h2>
<p>Kobe</p>
</cpn>
</div>
<template id="cpn">
<div>
<h2>我是组件</h2>
<p>我是组件,哈哈哈</p>
<h2>----------------------------</h2>
<slot>
<button>按钮</button>
</slot>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: 'Bryant',
},
components: {
cpn: {
template: '#cpn'
}
}
})
</script>
69-具名插槽的使用
<div id="app">
<cpn>
<span slot="m">center</span>
<span>最后一个</span>
</cpn>
</div>
<template id="cpn">
<div>
<h2>我是组件</h2>
<!-- <slot></slot> -->
<slot name="l"><span>left</span></slot>
<slot name="m"><span>mid</span></slot>
<slot name="r"><span>right</span></slot>
<slot><span>最后一个</span></slot>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: 'Bryant',
},
components: {
cpn: {
template: '#cpn'
}
}
})
</script>
70
<div id="app">
<cpn v-show="isShow"></cpn>
</div>
<template id="cpn">
<div>
<h2>我是子组件</h2>
<h2>哈哈哈</h2>
<button v-show="isShow">子组件</button>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: 'Bryant',
isShow: true
},
components: {
cpn: {
template: '#cpn',
data(){
return {
isShow: false
}
}
}
}
})
</script>
71
<div id="app">
<cpn></cpn>
<cpn>
<!-- 目的是获取子组件里面的pLanguages -->
<template slot-scope="slot">
<span v-for="item in slot.data0">{{item}}-</span>
</template>
</cpn>
<cpn>
<template slot-scope='slot'>
<span>{{slot.data0.join(' - ')}}</span>
</template>
</cpn>
</div>
<template id="cpn">
<div>
<slot :data0="pLanguages">
<ul>
<li v-for="item in pLanguages">{{item}}</li>
</ul>
</slot>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
firstName: 'Bryant'
},
components: {
cpn: {
template: '#cpn',
data(){
return {
pLanguages: ['JavaScript','C++','Java','Python','Go','Swift']
}
}
}
}
})
</script>