Tag:javascriptvue.js
Article From:https://segmentfault.com/q/1010000012141592
Question:

How to solve the Vue parent component template passed to the grandchildren component

Sun Tzu component

Subcomponent

call

Expected result

I try to solve it with slot, but the reason why it doesn’t work is

The scope of action is Cannot be rendered to

Is there any way to solve this problem? Or this way can not be solved.
(The only thing I think of is passing through the JS string to render, but not very friendly (requiring a bunch of strings).
It seems that Vue can’t do react and send JSX templates to the same level of sub components to render.

Answer 0:

Every inherited component needs to have a 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>

Effect:

Similar Posts:

Leave a Reply

Your email address will not be published. Required fields are marked *