vue插槽01-插槽基本用法，具名插槽，插槽编译作用域详细笔记
程序员文章站
2022-08-17 09:05:59
文章目录一、插槽基本用法二、具名插槽编译作用域总结一、插槽基本用法App.vue
app
import Wrap from "./component...test
创建项目 vue create slot
配置
重写src文件夹
一、插槽基本用法
App.vue
<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>
组件 Wrap.vue
<template>
<div class="wrap">
<h1>wrap</h1>
<hr />
<slot /> //这里写就可以把组件中的内容填充到这里来，不写里面的内容无效
<hr />
</div>
</template>
组件 Box.vue
<template>
<div class="box">
<h2>Box</h2>
</div>
</template>
二、具名插槽
有时我们需要多个插槽，在向具名插槽提供内容的时候，我们可以在一个 template 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称：
代码如下（示例）：
App.vue
当template里面不写内容的时候就是默认内容，如果有内容默认就不显示。
<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 设置默认显示的的内容
<slot name="list">
<h1>这里默认的list结构，如果外边有内容默认的就不显示</h1>
</slot>
<slot name="box">
<h1>这里默认的box结构</h1>
</slot>
//单标签
<slot name="footer" />
<slot>
<!-- 默认显示的值，当外部传入结构时，不作用 -->
<h1>这是slot的默认结构</h1>
</slot>
三 编译作用域
官网：父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
因为其 (指该插槽的) 内容是传递给 组件 的，而不是在组件内部定义的
注意 v-slot 只能添加在 上 (只有一种例外情况)，只有需要接收属性时，v-slot才可以直接写在组件标签上 。
而非父子组件传值可以用 eventBus
效果图在最下面
- 就是Box 组件标签绑定的值能在Box组件中获取
- Box组件中的值要想传到Wrap也可以用 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
在这个页面可以获取到App中的数据
<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 当点击按钮时发送到Wrap组件中
<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>
效果图：
写太多了 换下一章讲解作用域插槽
本文地址：https://blog.csdn.net/qq_46057900/article/details/109325894
上一篇： 实现瀑布流
下一篇： Day07 动态页面技术（JSP）