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

changes

This commit is contained in:
3056762376@qq.com 2022-11-07 10:18:00 +08:00
parent 040047b60b
commit 8887f4937d
4 changed files with 110 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
10-组件化开发/09-组件插槽使用/01-slot插槽的基本使用.html
View File

@ -19,6 +19,13 @@
<div>这是一个span标签</div>
<span>呵呵呵</span>
</apps>
<apps>
<div>
<div>这是一个span标签</div>
<span>耶耶耶</span>
</div>
</apps>
<apps></apps>
<apps></apps>
<apps>
<div>这是一个单选框</div>
@ -36,7 +43,7 @@
</div>
</template>
</body>
<script src="../../../JavaScript/vue.js"></script>
<script src="../../JavaScript/vue.js"></script>
<script>
new Vue({
el:"#app",

5
10-组件化开发/09-组件插槽使用/02-slot具名插槽的使用.html
View File

@ -12,6 +12,9 @@
<input type="text" name="" id="">
<button>提交</button>
</apps>
<apps>
<input type="button" value="">
</apps>
<apps></apps>
</div>
<template id="tpl">
@ -30,7 +33,7 @@
</div>
</template>
</body>
<script src="../../../JavaScript/vue.js"></script>
<script src="../../JavaScript/vue.js"></script>
<script>
new Vue({
el:"#app",

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

@ -0,0 +1,46 @@
<!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>
<h1>这是父组件</h1>
<div slot-scope="data">
<span v-for="li in data">{{li.join("-")}}</span>
</div>
</apps>
</div>
<template id="tpl">
<div>
<slot :datas="list">
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</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>

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

@ -0,0 +1,52 @@
<!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>
<!--
使用嵌套传递内容到插槽必须将slot属性设置在父元素上
-->
<body>
<div id="app">
<apps>
<input type="text" name="" id="" placeholder="左边" slot="left">
<label for="" slot="mid">中间</label>
<div slot="right">
<input type="text" name="" id="" placeholder="右边" >
<input type="checkbox" name="" id="">
</div>
</apps>
<br>
<apps></apps>
</div>
<template id="tpl">
<div>
<slot name="left">
<input type="button" value="左边">
</slot>
<slot name="mid">
<input type="button" value="中间">
</slot>
<slot name="right">
<input type="button" value="右边">
</slot>
</div>
</template>
</body>
<script src="../../../JavaScript/vue.js"></script>
<script>
new Vue({
el:"#app",
components:{
'apps':{
template:"#tpl"
}
}
})
</script>
</html>