如何解决vue 父组件 模板 传递到 孙子组件中去

Question

如何解决vue 父组件 模板 传递到 孙子组件中去

孙子组件

子组件

调用

期望结果

我尝试用slot解决 但是不奏效 原因是

所处的作用域 是 中无法被渲染到

有什么方法能解决这个问题呢 或者 这种方式不能解决
(唯一想到的是通过js字符串传入 在渲染 但是写起来 不太友好(需要些一堆字符串))
貌似vue不能做到react的将jsx模板一样 传到 一级级的子组件中去 在渲染

Answer 1

每一个被继承的组件都需要有slot;
father.vue

<template>
<div class="father"> 
    <h1>father</h1>
    <slot></slot>
</div>
</template>

child.vue

<template>
  <div class="child">
    <h2>child</h2>
    <slot></slot>
  </div>
</template>

subchild.vue

<template>
<div class="subchild">
    <Father>
        <Child>
            <h3>subchild</h3>
        </Child>
    </Father>
</div>
</template>

<script>
import Father from './father'
import Child from './child'
export default {
    components: {
        Father,
        Child,
    }
}
</script>

效果：

Answer 2

没搜索到答案，贴一下自己的解决方案吧

父级组件正常传slot

子组件接收后在slot外包一层template传给孙组件的slot

Answer 3

请问楼主你解决了吗，我这里也遇到同样的情况