如何解决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>

效果：