Vue: как использовать компонент в качестве опоры, не отображается пустой компонент no html тег компонента - PullRequest
Новая
       5

Vue: как использовать компонент в качестве опоры, не отображается пустой компонент no html тег компонента

0 голосов
/ 18 июня 2020

У меня три компонента:

  • HugeBox.vue
  • Box.vue
  • Dog.vue

HugeBox содержит Box, который, в свою очередь, содержит Dog: 

HugeBox -> Box -> Dog

Я пытаюсь передать Dog в Box как опору, но это не работает: все, что получает при открытии HugeBox отображается 

Box with

, тогда как должно быть 

Box with Dog

HugeBox. vue: 

<template>
    <Box :myComponent = "Dog"/>
</template>

<script>
    import Dog from '../test/Dog.vue';
    import Box from '../test/Box.vue';

    export default {
        components: {Dog, Box}
    }
</script>

Коробка. vue: 

<template>
    <div>
        <p>Box with</p>
        <component :is = "myComponent"/>
    </div>
</template>


<script>
    export default  {
        props:  {
            myComponent:  {
                type: [String, Object],
             }
        }
    }
</script>

Собака. vue: 

<template>
    <p>Dog</p>
</template>

Что я делаю не так?

Ответы [ 2 ]

1 голос
/ 18 июня 2020

В Vue, если вам нужно передать разметку или другие компоненты в дочерний компонент, вы можете использовать слоты .

Слоты позволяют вам вкладывать компоненты в другие компоненты, как и вы делаете с HTML.

HugeBox. vue: 

<template>
    <Box>
        <Dog/>
    </Box>
</template>

<script>
    import Dog from '../test/Dog.vue';
    import Box from '../test/Box.vue';

    export default {
        components: {Dog, Box}
    }
</script>

Box. vue: 

<template>
    <div>
        <p>Box with</p>
        <slot></slot>
    </div>
</template>


<script>
    import Box from '../test/Dog.vue';
    export default  {
        props:  {
            myComponent:  {
                type: [String, Object],
             }
        },
        components: { Dog }
    }
</script>

Тег <slot> используется, чтобы указать, где должен отображаться вложенный контент.

EDIT:

Таким образом, вы можете фактически передавать компоненты как свойства и отображать их с помощью метода <component :is="..." />.

Причина, по которой он не работает, заключается в том, что ваш исходный компонент HugeBox.vue не имеет доступа к компоненту Dog как к переменная шаблона. Вы должны сначала назначить его свойству данных: 

<template>
  <Box :myComponent="dog"/>
</template>

<script>
import Dog from "../test/Dog.vue";
import Box from "../test/Box.vue";

export default {
  components: { Box },
  data() {
    return {
      dog: Dog // assign the Dog component object to data, allowing it to be passed as a prop
    };
  }
};
</script>
0 голосов
/ 18 июня 2020

Вы должны импортировать свой Dog компонент в свой Box компонент. Не внутри вашего компонента HugeBox.

HugeBox. vue

<template>
    <Box :myComponent = "'Dog'"/>
</template>

<script>
    import Dog from '../test/Box.vue';

    export default {
        components: {Box}
    }
</script>

Box. vue

<template>
    <div>
        <p>Box with</p>
        <component :is = "myComponent"/>
    </div>
</template>


<script>
    import Box from '../test/Dog.vue';
    export default  {
        props:  {
            myComponent:  {
                type: [String, Object],
             }
        },
        components: { Dog }
    }
</script>

Dog. vue

<template>
    <p>Dog</p>
</template>
...