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

Question

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

孙子组件

子组件

调用

期望结果

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

所处的作用域 是

 中无法被渲染到

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

Answer 1

每一个被继承的组件都需要有slot;father.vue<template><div class="father">&nbsp;&nbsp; &nbsp; <h1>father</h1>&nbsp; &nbsp; <slot></slot></div></template>child.vue<template>&nbsp; <div class="child">&nbsp; &nbsp; <h2>child</h2>&nbsp; &nbsp; <slot></slot>&nbsp; </div></template>subchild.vue<template><div class="subchild">&nbsp; &nbsp; <Father>&nbsp; &nbsp; &nbsp; &nbsp; <Child>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3>subchild</h3>&nbsp; &nbsp; &nbsp; &nbsp; </Child>&nbsp; &nbsp; </Father></div></template><script>import Father from './father'import Child from './child'export default {&nbsp; &nbsp; components: {&nbsp; &nbsp; &nbsp; &nbsp; Father,&nbsp; &nbsp; &nbsp; &nbsp; Child,&nbsp; &nbsp; }}</script>效果：