Getting to know the slot
Create project vue create slot
configuration
rewrite src folder
One, the basic slot usage
View app
<template>
<div id="app">
app
<Wrap>
<Box />
<div>test</div>
</Wrap>
</div>
</template
<script>
import Wrap from "./components/Wrap";
import Box from "./components/Box";
export default {
components: {
Wrap,
Box,
},
};
</script>
Component Wrap.vue
<template>
<div class="wrap">
<h1>wrap</h1>
<hr />
<slot /> //这里写就可以把组件中的内容填充到这里来，不写里面的内容无效
<hr />
</div>
</template>
Component Box.vue
<template>
<div class="box">
<h2>Box</h2>
</div>
</template>
Two, named slots
Sometimes we need multiple slots. When providing content to a named slot, we can use the v-slot instruction on a template element and provide its name
as a parameter of v-slot: the code is as follows (example):
App.vue
is the default content when there is no content in the template. If there is content, it will not be displayed by default.
<Wrap>
<template v-slot:list>
<h2>默认失效</h2>
</template>
//也可这样写
<template #box>
<Box/>
</template>
<template v-slot:footer>
<footer>footer11</footer>
</template>
//默认 写了之后test1111不会显示
<template #default>
<h1>test</h1>
</template>
<div>test1111</div>
</Wrap>
Wrap.vue sets the content displayed by default
<slot name="list">
<h1>这里默认的list结构，如果外边有内容默认的就不显示</h1>
</slot>
<slot name="box">
<h1>这里默认的box结构</h1>
</slot>
//单标签
<slot name="footer" />
<slot>
<!-- 默认显示的值，当外部传入结构时，不作用 -->
<h1>这是slot的默认结构</h1>
</slot>
Three compilation scope
Official website: All content in the parent template is compiled in the parent scope; all content in the child template is compiled in the child scope.
Because it (refer to the slot) is transmitted to the content of the component rather than the internal components defined in
Note v-slot can be added only (with one exception), only needs to receive the properties, v-slot only It can be written directly on the component label.
Instead of passing values from parent-child components, you can use eventBus
The effect picture is at the bottom
- That is, the value bound to the Box component label can be obtained in the Box component
- Box component values in order to spread Wrap can also be used EventBus
main.js
// Vue原型上 添加 eventBus
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
Vue.prototype.$eventBus = new Vue();
new Vue({
render: h => h(App)
}).$mount('#app')
App.vue
can get the data in the App on this page
<template>
<div id="app">
app
<Wrap>
<!-- 这里作用域是app组件的 -->
<Box :title="value" />
<p>这是APP的P标签:{
{
value}}</p>
</Wrap>
</div>
</template>
<script>
import Wrap from "./components/Wrap";
import Box from "./components/Box";
export default {
components: {
Wrap,
Box,
},
data(){
return {
value:'app-value',
}
}
};
</script>
Wrap.vue
<template>
<div class="wrap">
<h1>wrap</h1>
<h4>接收到Box的数据：{
{
boxValue}}</h4>
<slot />
<p>这是wrap的P标签</p>
<hr />
</div>
</template>
<script>
export default {
data() {
return {
value: "warap-value",
boxValue: "",
};
},
created() {
this.$eventBus.$on('send',(value)=>{
this.boxValue=value;
})
},
};
</script>
Box.vue is sent to the Wrap component when the button is clicked
<template>
<div class="box">
<h2>Box</h2>
<p>拿到APP中的tilte : {
{
title }}</p>
<input type="text" v-model="boxValue">
<button @click="sendAction">sendToWrap</button>
</div>
</template>
<script>
export default {
props: {
title: String,
},
data() {
return {
boxValue: "",
};
},
methods: {
sendAction(){
console.log(this.boxValue);
this.$eventBus.$emit('send',this.boxValue);
}
},
};
</script>
<style>
.box {
background: yellow;
}
</style>
Effect picture:
Too much to write for the next chapter to explain scope slots