鍍金池/ 問答/HTML/ 如何解決vue 父組件 模板 傳遞到 孫子組件中去

如何解決vue 父組件 模板 傳遞到 孫子組件中去

如何解決vue 父組件 模板 傳遞到 孫子組件中去

孫子組件

clipboard.png

子組件

clipboard.png

調(diào)用

clipboard.png

期望結(jié)果

clipboard.png

我嘗試用slot解決 但是不奏效 原因是
clipboard.png
所處的作用域 是clipboard.png 中無法被渲染到

有什么方法能解決這個(gè)問題呢 或者 這種方式不能解決
(唯一想到的是通過js字符串傳入 在渲染 但是寫起來 不太友好(需要些一堆字符串))
貌似vue不能做到react的將jsx模板一樣 傳到 一級(jí)級(jí)的子組件中去 在渲染

回答
編輯回答
背叛者

每一個(gè)被繼承的組件都需要有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>

效果：
圖片描述

2017年8月24日 04:17