关于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...