vue插槽，也就是子頁面、父頁面相互傳值的另一寫法
阿新 • • 發佈：2018-05-31
style def com data component rop 頁面 ret slot
<slot>子頁面自己玩</slot>
<slot name=‘s3‘ text=‘子頁面傳父頁面‘></slot>
</div>
</template>
父頁面:
<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>
vue插槽，也就是子頁面、父頁面相互傳值的另一寫法