vue插槽，也就是子页面父页面相互传值的另一写法
Posted 江山一族
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
以上是关于vue插槽，也就是子页面父页面相互传值的另一写法的主要内容，如果未能解决你的问题，请参考以下文章