关于作用域插槽 slot-scope 的一个问题

来源:1-5 Vue.js 源码构建

慕粉3946981

2020-09-26

我在子组件中使用 v-bind暴露数据

// 子组件
<slot v-bind:接收数据名称="暴露数据名称"></slot>

然后父组件使用

// 父组件中使用插槽中暴露的数据
<template slot-scope="作用域名称">
	<div>{{作用域名称.接收数据名称}}</div>
</template>

我可以在父组件中这样拿到子组件插槽暴露出来的数据,但我想在定义子组件时使用具名插槽

// 子组件
<slot name="xie" v-bind:接收数据="暴露的数据"></slot>

在父组件中使用时

<template #xie slot-scope="作用域名称">
	<div>{{作用域名称.接收数据}}</div>
</template>

这样就报错了
Unexpected mixed usage of different slot syntaxes.
有什么方法可以在使用作用域插槽同时使用具名插槽

写回答

1回答

ustbhuangyi

2020-09-26

https://cn.vuejs.org/v2/guide/components-slots.html#%E5%85%B7%E5%90%8D%E6%8F%92%E6%A7%BD
你具名插槽语法用错了吧,另外建议升级到 2.6 以上版本的 Vue.js,插槽的语法会更简单

1
0

Vue.js 源码深入解析 深入理解Vue实现原理

全方位讲解 Vue.js 源码,进阶高级工程师

4986 学习 · 1038 问题

查看课程