testzm0476
/
vue222
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

已更新至作用域插槽

This commit is contained in:
3056762376@qq.com 2022-11-07 20:08:25 +08:00
parent dadd6ff863
commit 585e9392ff
3 changed files with 60 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
10-组件化开发/09-组件插槽使用/03-作用域插槽的使用.html
View File

@ -13,7 +13,7 @@
<div slot-scope="item">
<h1>这是父组件</h1>
<span v-for="li in item">
<span>{{li.join("__-_")}}</span>
<span>{{li.join("-")}}</span>
</span>
</div>
</apps>

15
10-组件化开发/09-组件插槽使用/index.html Normal file
View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
</div>
</body>
<script src="../../"></script>
</html>

44
10-组件化开发/09-组件插槽使用/复习/复习具名插槽.html Normal file
View File

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<apps>
<div slot="frame">
<input type="checkbox" name="" id="">
</div>
</apps>
<apps></apps>
<apps></apps>
<apps></apps>
</div>
<template id="tpl">
<div>
<slot name="frame">
<input type="text" name="" id="" placeholder="请输入文本框">
</slot>
</div>
</template>
</body>
<script src="../../JavaScript/vue.js"></script>
<script>
new Vue({
el:"#app",
components:{
'apps':{
template:"#tpl",
data(){
return {
list:['内容1','内容2','内容3']
}
}
}
}
})
</script>
</html>