vuebase----3.slot插槽

Posted 2022-06-25 xiao-peng-ji

1.不具名slot;

2.具名slot;

3.父组件模板的东西在父级作用域内编译，子组件模板的所有东西在子级作用域内编译；

4.编译作用域

5.作用域插槽（数据传递）

6.数据可以动态的改变

------------------------------------------------------------App.vue-------------------------------------------------------------------------

<template>
<div id="app">
<img src="./assets/logo.png">
<!-- <HelloWorld/> -->
<Parent />
<!-- <Music/> -->
<slotDemo>
<!-- <div>hello插槽</div>
<template slot="v1">
<div class="v1">slotParentmsg</div>
</template>
<template slot="v2">
<div class="v1">v2内容</div>
</template> -->
<div slot-scope="slotparents"><h2>slotparents.msgs</h2></div>
</slotDemo>
</div>
</template>

<script>
/* import HelloWorld from ‘./components/HelloWorld‘ */
import Parent from ‘./components/parent‘
import Music from ‘./components/music‘
import slotDemo from ‘./components/slotDemo‘

export default
name: ‘App‘,
components:
Parent,
Music,
slotDemo
,
data()
return
slotParentmsg:"插槽的动态内容"

,
methods:

</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>

----------slotDemo.vue---------

<template>
<div>
<!-- <slot name="v1"></slot>
<slot name="v2">默认信息</slot> -->
<slot :msgs="msg"></slot>
</div>
</template>

<script>
export default
name: "slotDemo",
data()
return
msg:"子插槽的数据动态改变"



</script>

<style lang="css" scoped>
</style>

------------------------parent.vue-------------------------------

<template>
<div class="parent">
<slotDemo>
<template slot-scope="slotparents">
<h1>1111----slotparents.msgs----1111</h1>
</template>
</slotDemo>
父组件：
<p>sendParentinfo</p>
小明明称呼：
<Child title="父组件的数据" nick="小宝贝" friend="" parentss="小宝贝爸爸" :age="age" @sendParentinfo="sendParentinfos" />
<p>gemsgInfo</p>
</div>
</template>

<script>
import slotDemo from ‘./slotDemo‘
import Child from ‘./child‘
export default
name: "parent",
components:
Child,
slotDemo
,
data()
return
sendParentinfo:"",
age:1000

,
computed:
gemsgInfo()
return this.$root.msg

,
methods:
sendParentinfos(data)
this.sendParentinfo=data



</script>
<style lang="css" scoped>
</style>