vuebase----3.slot插槽

标签：数据   vue   模板   lan   ext   sse   src   动态   end   

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>

vuebase----3.slot插槽

标签：数据   vue   模板   lan   ext   sse   src   动态   end   

原文地址：https://www.cnblogs.com/xiao-peng-ji/p/11329863.html