已更新至具名插槽
This commit is contained in:
3056762376@qq.com
parent
1ee269ce31
commit
85c82fe0e6
|
|
@ -0,0 +1,51 @@
|
|||
<!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>
|
||||
<!--
|
||||
slot插槽使用必须在模板内部有定义slot标签，通过使用组件模板传递插槽内容传递过去
|
||||
-->
|
||||
<div id="app">
|
||||
<apps>
|
||||
<div>这是一个span标签</div>
|
||||
<span>哈哈哈</span>
|
||||
</apps>
|
||||
<apps>
|
||||
<div>这是一个span标签</div>
|
||||
<span>呵呵呵</span>
|
||||
</apps>
|
||||
<apps></apps>
|
||||
<apps>
|
||||
<div>这是一个单选框</div>
|
||||
<input type="radio" name="" id="">
|
||||
</apps>
|
||||
</div>
|
||||
<template id="tpl">
|
||||
<div>
|
||||
<div>
|
||||
<slot>
|
||||
<div>这是一个按钮</div>
|
||||
<button>按钮</button>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</body>
|
||||
<script src="../../../JavaScript/vue.js"></script>
|
||||
<script>
|
||||
new Vue({
|
||||
el:"#app",
|
||||
components:{
|
||||
'apps':{
|
||||
template:"#tpl",
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -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 slot="item">
|
||||
<input type="text" name="" id="">
|
||||
<button>提交</button>
|
||||
</apps>
|
||||
<apps></apps>
|
||||
</div>
|
||||
<template id="tpl">
|
||||
<div>
|
||||
<div>
|
||||
<slot name="item"></slot>
|
||||
</div>
|
||||
<div>
|
||||
<slot>
|
||||
<div>
|
||||
<input type="text" name="" id="">
|
||||
<input type="button" value="上传" >
|
||||
</div>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</body>
|
||||
<script src="../../../JavaScript/vue.js"></script>
|
||||
<script>
|
||||
new Vue({
|
||||
el:"#app",
|
||||
components:{
|
||||
'apps':{
|
||||
template:"#tpl"
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!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 @num="show"></apps>
|
||||
<div v-for="li in list">{{li}}</div>
|
||||
</div>
|
||||
<template id="tpl">
|
||||
<div>
|
||||
<h1>这是子组件内的列表</h1>
|
||||
<ul v-for="list in item">
|
||||
<li>{{list}}</li>
|
||||
</ul>
|
||||
<button @click="linkNumber()">点击我传值</button>
|
||||
</div>
|
||||
</template>
|
||||
</body>
|
||||
<script src="../../../JavaScript/vue.js"></script>
|
||||
<script>
|
||||
new Vue({
|
||||
el:"#app",
|
||||
data:{
|
||||
list:[]
|
||||
},
|
||||
methods: {
|
||||
show(val){
|
||||
this.list.push(val)
|
||||
}
|
||||
},
|
||||
components:{
|
||||
'apps':{
|
||||
template:"#tpl",
|
||||
data(){
|
||||
return {
|
||||
item:['这是内容1', '这是内容2', '这是内容3','这是内容4']
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
linkNumber(){
|
||||
this.$emit('num',this.item)
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -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>
|
||||
<body>
|
||||
<div id="app">
|
||||
<h1>这是父组件</h1>
|
||||
<div v-for="item in list">
|
||||
<div>{{item}}</div>
|
||||
</div>
|
||||
<h1>这是子组件</h1>
|
||||
<apps></apps>
|
||||
</div>
|
||||
<template id="tpl">
|
||||
<div>
|
||||
<div>
|
||||
<div>{{lists}}</div>
|
||||
</div>
|
||||
<button @click="clickMe()">访问</button>
|
||||
</div>
|
||||
</template>
|
||||
</body>
|
||||
|
||||
<script src="../../../JavaScript/vue.js"></script>
|
||||
<script>
|
||||
new Vue({
|
||||
el:"#app",
|
||||
data:{
|
||||
list:['这是父组件1', '这是父组件2', '这是父组件3', '这是父组件4']
|
||||
},
|
||||
components:{
|
||||
'apps':{
|
||||
template:"#tpl",
|
||||
data(){
|
||||
return {
|
||||
lists:[]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clickMe() {
|
||||
this.lists = this.$root.list
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!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>
|
||||
<h1>这是父组件</h1>
|
||||
<h2 v-for="li in list">
|
||||
<div>{{li}}</div>
|
||||
</h2>
|
||||
</div>
|
||||
<apps :new_list="list"></apps>
|
||||
</div>
|
||||
<template id="tpl">
|
||||
<div>
|
||||
<h1>这是子组件</h1>
|
||||
<div v-for="lists in new_list">
|
||||
<div>{{lists}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</body>
|
||||
<script src="../../../JavaScript/vue.js"></script>
|
||||
<script>
|
||||
new Vue({
|
||||
el:"#app",
|
||||
data:{
|
||||
list:['这是第一个内容','这是第二个内容','这是第三个内容','这是第四个内容']
|
||||
},
|
||||
components:{
|
||||
'apps':{
|
||||
template:"#tpl",
|
||||
props:{
|
||||
'new_list':{
|
||||
type:Array,
|
||||
default(){
|
||||
return []
|
||||
},
|
||||
require:true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<!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>
|
||||
<!--
|
||||
$this.refs代表父组件访问子组件
|
||||
ref代表子组件的识别
|
||||
-->
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<apps ref="list"></apps>
|
||||
<div>
|
||||
<h1>这是父组件</h1>
|
||||
<div v-for="items in list">
|
||||
<div>{{items}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<button @click="thereClick()">访问</button>
|
||||
</div>
|
||||
<template id="tpl">
|
||||
<div>
|
||||
<h1>这是子组件内的列表</h1>
|
||||
<div v-for="item in lists">
|
||||
<div>{{item}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</body>
|
||||
<script src="../../../JavaScript/vue.js"></script>
|
||||
<script>
|
||||
new Vue({
|
||||
el:"#app",
|
||||
data:{
|
||||
list:[]
|
||||
},
|
||||
methods: {
|
||||
thereClick(){
|
||||
this.list=this.$refs.list.lists;
|
||||
}
|
||||
},
|
||||
components:{
|
||||
'apps':{
|
||||
template:"#tpl",
|
||||
data(){
|
||||
return {
|
||||
lists:['列表项1','列表项2',"列表项3"]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
Loading…
Reference in New Issue