Table of contents
4. Summary of communication between subcomponents and parent components
2. Example of multi-parameter passing
1. Slot
1. Format
put in child component
<slot>内容</slot>2. Content
You can put the code of any module
3. Principle
When referenced by the parent component, the fill content will be applied to the slot
css module
<style>
.box{
width: 200px;
height: 200px;
background-color: aqua;
float: left;
margin-right: 20px;
}
</style>html module
<body>
<div id="app">
<cpn>
<a href="">点击</a>
</cpn>
<cpn>
<button>点击</button>
</cpn>
<cpn></cpn>
</div>
<template id="cpn">
<div>
<div class="box">
<h1>{
{msg}}</h1>
<slot>
<h4>默认内容</h4>
</slot>
</div>
</div>
</template>
<script>
new Vue({
el:'#app',
components:{
cpn:{
template:'#cpn',
data(){
return{
msg:'子组件'
}
}
}
}
})
</script>
</body>
2. Named slots
1. Definition
When using multiple slots, add a name attribute to the slot and set the slot name
2. Steps
(1) Add the binding name attribute to the <slot> tag
(2) Wrap the sticky note with <template> tag and bind the corresponding slot . The binding method is as follows:
① v-slot: slot name [Note that there is an English colon in the middle , not an equal sign]
②Abbreviation: #slot name
<body>
<div id="app">
<cpn>
<template v-slot:slot1>
<div>
<a href="">跳转</a>
</div>
</template>
<template #slot2>
<div>
<a href="">点击</a>
</div>
</template>
</cpn>
<cpn>
<template #slot1>
<div>
<button>点击</button>
</div>
</template>
</cpn>
</div>
<template id="cpn">
<div>
<div class="box">
<slot name="slot1"></slot>
<h1>{
{msg}}</h1>
<slot name="slot2"></slot>
</div>
</div>
</template>
<script>
new Vue({
el:'#app',
components:{
cpn:{
template:'#cpn',
data(){
return{
msg:'子组件'
}
}
}
}
})
</script>
</body>
3. Scope slots
1. Prerequisites
To be used on top of named slots
2. Function
Pass data, pass the data of the child component to the parent component
3. Steps
(1) Set up the named slot first
(2) Customize the attribute name on the <slot> tag of the subcomponent to bind the parameters
(3) Assign formal parameters on the named slot of the parent component to receive the passed parameters
Format: #slot name="formal parameter"
<body>
<div id="app">
<cpn>
<template #slot1="item">
<div>
<h3>我是一个具名插槽</h3>
<h5>{
{item}}</h5>
<h5>{
{item.cityname}}</h5>
</div>
</template>
</cpn>
</div>
<template id="cpn">
<div>
<h1>{
{msg}}</h1>
<slot name="slot1" :cityName="city.name">
<h4>默认内容</h4>
</slot>
</div>
</template>
<script>
new Vue({
el:'#app',
components:{
cpn:{
template:'#cpn',
data(){
return{
msg:'子组件',
city:{
name:'北京',
},
}
},
},
},
})
</script>
</body>
4. Summary of communication between subcomponents and parent components
1. Three steps
(1) The subcomponent is ready for the parameters that need to be passed
Custom method: this.$emit('custom method name', parameter 1, parameter 2...)
Custom method name format : composite name-name
(2) Connection label: through the connection key between the child component and the parent component <cpn></cpn>
(3) The parent component receives and stores the parameters passed by the child component
2. Example of multi-parameter passing
<body>
<div id="app">
<h4>{
{idInfo}}</h4>
<h4>{
{nameInfo}}</h4>
<h4>{
{ageInfo}}</h4>
<detail @info-transfer="getInfo"></detail>
</div>
<template id="detail">
<div>
<h1>{
{msg}}</h1>
<button @click="btnClick">传递学生信息</button>
</div>
</template>
<script>
new Vue({
el:'#app',
data:{
idInfo:'未传递id',
nameInfo:'未传递name',
ageInfo:'未传递age',
},
methods:{
getInfo(id,name,age){
console.log(id,name,age);
this.idInfo = id
this.nameInfo = name
this.ageInfo = age
}
},
components:{
detail:{
template:'#detail',
data(){
return{
msg:'测试',
info:{
id:'1',
name:'申小兮',
age:'18',
}
}
},
methods:{
btnClick(){
this.$emit('info-transfer',this.info.id,this.info.name,this.info.age)
}
}
}
}
})
</script>
</body>
