Vue三大核心之三(插槽)

1.具名组件
我们一个组件里需要多个插槽,就需要用到slotname属性

  1. <!--子组件定义-->
  2. <div>
  3. <header>
  4. <slot name="header"></slot>
  5. </header>
  6. <main>
  7. <slot></slot>
  8. </main>
  9. <footer>
  10. <slot name="footer"></slot>
  11. </footer>
  12. </div>
  13. <!--父组件-->
  14. <div>
  15. <template v-slot:header>
  16. <h1>Here might be a page title</h1>
  17. </template>
  18. <p>A paragraph for the main content.</p>
  19. <p>And another one.</p>
  20. <template v-slot:footer>
  21. <p>Here some contact info</p>
  22. </template>
  23. </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>

  1. ## 案例
  2. 子组件定义插槽

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

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

<style>

</style>

  1. 父组件使用子组件插槽

<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/rumenz-vue/tree/master/rumenz-vue-three-core

返回笔记列表
入门小站