<body>
<div id="app">
1111
<cpn v-show="isShow"></cpn>
1111
</div>
<template id="cpn">
<div>
<h1>子组件</h1>
<a href="">lianjie</a>
<button v-show="isShow"></button>
</div>
</template>
<script>
const app=new Vue({
el:"#app",
data:{
isShow:true,
},
components:{
cpn:{
template:"#cpn",
data(){
return{
isShow:false
}
}
}
}
})
</script>
</body>
作用域插槽的使用：
<body>
<div id="app">
<cpn></cpn>
<cpn>
<template slot-scope="slot1">
<span>{{slot1.data.join('~')}}</span>
</template>
</cpn>
<cpn>
<template slot-scope="slot1">
<span v-for="item in slot1.data">{{item}}*</span>
</template>
</cpn>
</div>
<template id="cpn">
<div>
<slot :data="pLanguages">
<ul>
<li v-for="item in pLanguages">{{item}}</li>
</ul>
</slot>
</div>
</template>
<script>
const app=new Vue({
el:"#app",
components:{
cpn:{
template:"#cpn",
data(){
return{
pLanguages:['js','c++','py']
}
}
}
}
})
</script>
</body>
|