<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<aa v-show="isshow">
<p slot="left">left</p>
<p slot="center">center</p>
<p slot="right">right</p>
</aa>
<aa>
<div slot-scope="slot">
<span v-for="item in slot.data">{{item}}-</span>
</div>
</aa>
</div>
</body>
<template id="demo">
<div>
<h1 v-show="isshow" >子组件</h1><!--变量作用域 读取子组件中的data数据源-->
<slot name="left">插槽1</slot>
<slot name="center">插槽2</slot>
<slot name="right">插槽3</slot>
<slot>默认插槽</slot>
<slot :data="language">
<ul>
<li v-for="item in language">{{item}}</li>
</ul>
</slot>
</div>
</template>
<script>
var vm = new Vue({
el: '#app',
data:{
isshow:true,
world:"qwer",
name:"abcdefg"
},
components:{
aa:{
template:"#demo",
data () {
return {
isshow:false,
language:[
"php","java","c++","lua"
]
}
},
}
}
})
</script>
</html>
200
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
