1. 程式人生 > >vue插槽,也就是子頁面、父頁面相互傳值的另一寫法

vue插槽,也就是子頁面、父頁面相互傳值的另一寫法

style def com data component rop 頁面 ret slot

父頁面:

<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插槽,也就是子頁面、父頁面相互傳值的另一寫法