Vue解构prop设置默认值报错

Question

在学习vue的过程中，学到了插槽的解构插槽prop，如下图：

代码如下：
父组件中：

<hello-world  v-slot="{ user = {firstName:'aSDASDA'} }">
      {{ user.firstName }}
    </hello-world>

组件模板中：

<slot :user="user">{{ user.lastName }}</slot>

组件数据：

 data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      user:{
        firstName:"roi",
        lastName:'hehe'
      }
    }
  }
  

最终编译报错：

想知道是哪里出错导致的？按文档的写法来的，照理说不应该。

Answer 1

这是 vue 的 bug，vue 目前会使用 'v-' '@' ':' 语法检查去检查 v-slot，而这些指令的值都会被检测是否为表达式，所以会对 v-slot="{ user = {firstName:'aSDASDA'} }" 进行误报。

你可以先使用 #default="{ user = {firstName:'aSDASDA'} }" 这种简写语法来来避免这个 bug.

Answer 2

你的子组件slot已经绑定了user,父级又去绑定一个表达式，那不就是重复的表达式吗?而且你这样使用会导致插槽作用域不明确。你应该如此使用在线demo。