关于vue.js:Vue三大核心之三插槽

1.具名组件
咱们一个组件里须要多个插槽,就须要用到slot的name属性

<!--子组件定义-->
<div>
  <header>
    <slot name="header"></slot>
  </header>
  
  <main>
    <slot></slot>
  </main>
  
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

<!--父组件-->
<div>
   <template v-slot:header>
    <h1>Here might be a page title</h1>
   </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template v-slot:footer>
    <p>Here some contact info</p>
  </template>
</div>

2.作用域组件

自 2.6.0 起有所更新。已废除的应用 slot-scope attribute 的语法在这里
有时让插槽内容可能拜访子组件中才有的数据是很有用的

//父组件应用子组件的值
<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user

//子组件向父组件传递值
<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>

案例

子组件定义插槽

<template>
  <div>
      <!--具名插槽-->
      <slot name="title"/>
      <!--作用域插槽 向父组件传递值-->
      <slot name="item" v-bind="{value:'vue'}" />
  </div>
</template>

<script>
export default {
    name:"test"
}
</script>

<style>

</style>

父组件应用子组件插槽

<template>
<div id="app">
   {{msg}}
   <Solt>
      <template v-slot:title>
         <h1>这段内容会填充到子组件中</h1>
      </template>
      <!--应用props来接管{value:'vue'}值-->
      <template v-slot:item="props">
          <p>======={{props}}</p>
      </template>
   </Solt>
  
</div>
</template>

<script>
//导入子组件
import Solt from './components/Solt'
export default {
  name: 'App',
  data() {
        return {
            msg: "hello 入门小站",
            name:"name",
            type:"入门",
            list:['入门','小站'],
            view:true
        }
    },
    methods: {
      
    },
  components: {
    Solt //必须要定义子组件
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

源码:https://github.com/mifunc/rum…