vue插槽,也就是子页面、父页面相互传值的另一写法
父页面:
<template>
<div class="parent">
<p>父组件</p>
<child>
<div slot='s1'>
<p >插槽1</p>
<p >插槽101</p>
</div>
<p slot='s2'>插槽2</p>
<p slot-scope='props' slot='s3'>
{{props.text}}
</p>
</child>
</div>
</template>
<script>
import child from './child'
export default{
name:'parent',
data(){
return{
}
},
methods:{
},
components:{
child
}
}
</script>
<style>
</style>
子页面:
<template>
<div class="child">
子组件组件
<slot name='s1'></slot>
<hr />
<slot name='s2'></slot>
<slot>子页面自己玩</slot>
<slot name='s3' text='子页面传父页面'></slot>
</div>
</template>
<script>
export default{
name:'child',
data(){
return{
}
},
methods:{
}
}
</script>
<style>
</style>