在学习vue插槽的时候,将匿名插槽,具名插槽,作用域插槽都实践了一遍,但是却碰到一些问题,请看代码
子组件:
<template>
<div class="zs">
我是HelloWorld2的孩子,这是祖先给我的{{toZS}}
<br>
<slot></slot>
<slot name="slot1"></slot>
<slot name="slot2"></slot>
<slot :hw2c="hw2c" :hw2cO="hw2cO"></slot>
</div>
</template>
<script>
export default {
inject: ['toZS'],
data() {
return {
hw2c: 'hw2c',
hw2cO: {
a: 'I am a',
b: 'I am b'
}
};
},
mounted() {
console.log('||----mounted----||');
console.log(this.$slots);
console.log(this.$scopedSlots);
}
};
</script>
<style>
.zs{
background-color: aqua;
}
</style>
父组件:
<template>
<div>
<p class="hw2-p" @click="$parent.$emit('foo', hw2)">我是HelloWorld2</p>
<p class="hw2-p" @click="$bus.$emit('sjzx', 1122)">我是HelloWorld2...</p>
<HelloWorld2C>
<p>我是匿名插槽!!!!!!!!!!!!!</p>
<template name="slot1">
<p>我是具名插槽1</p>
</template>
<template name="slot2">
<p>我是具名插槽2</p>
</template>
<template v-slot:default="{hw2c, hw2cO}">
<p>
作用域插槽:
{{hw2c}}
{{hw2cO && hw2cO.a}}
</p>
</template>
</HelloWorld2C>
</div>
</template>
问题一:匿名插槽区域显示的内容变成了作用域插槽的内容?
这个问题有在网上搜到,https://www.cnblogs.com/xianshenglu/p/8479915.html
这里说了匿名作用域插槽会覆盖匿名插槽,最好使用具名插槽。于是修改代码:
子组件:
<slot name="slot3" :hw2c="hw2c" :hw2cO="hw2cO"></slot>
父组件:
<template v-slot:slot3="{hw2c, hw2cO}">
<p>
作用域插槽:
{{hw2c}}
{{hw2cO && hw2cO.a}}
</p>
</template>
以上将匿名作用域插槽加上name,问题一得到解决。
问题二:$slots、$scopedSlots获取到的内容都比实际要少?
最终改写了父组件前3个插槽的写法,问题得到解决
<template v-slot:default>
<p>我是匿名插槽!!!!!!!!!!!!!</p>
</template>
<template v-slot:slot1>
<p>我是具名插槽1</p>
</template>
<template v-slot:slot2>
<p>我是具名插槽2</p>
</template>
不过不太清楚为什么?可能是vue的升级规定了写法。希望明了的同学不吝赐教~
网友评论