vue插槽01-插槽基本用法，具名插槽，插槽编译作用域详细笔记

---

---

创建项目 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

效果图在最下面

1. 就是Box 组件标签绑定的值能在Box组件中获取
2. 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>

效果图：

---

写太多了 换下一章讲解作用域插槽