已更新至具名插槽
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