Vue.js не может использовать to ‹slot› для рендеринга родительского компонента

Я просто пытаюсь следовать примеру использования слота на официальном сайте Vue. Но это не удалось, я сделал код очень коротким

родительский компонент

<template>
  <subMenuTemp>
    <div class="text" >
      parent content
    </div>
  </subMenuTemp>
</template>

<script>
  import subMenuTemp from 'src/test/testChildren.vue'
  export default  {
    data() {
    },
    components: {
      subMenuTemp
    }
  }
</script>

дочерний компонент другой файл .vue

<template>
  <div class="content">
      <slot>
        old content
      </slot>
  </div>
</template>

<script>
  export default {

  }
</script>

хотя код очень короткий, я так и не могу найти где моя ошибка


javascript vue.js slot
person doUWannaBuildASnowMan    schedule 21.09.2017    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Обязательно включите два компонента в свой main.js или какой-нибудь .js файл, который импортирует Vue. Это должно выглядеть так:

import Vue from 'vue'
import App from './App'
import subMenuTemp from './test/testChildren.vue'

new Vue({
    el: '#app',
    template: '<App/>',
    components: { App, subMenuTemp }
})
person Birkhoff Lee    schedule 21.09.2017
comment
почему мне нужно импортировать родительский компонент и дочерний компонент в файл main.js? Означает ли это, что если я хочу использовать slot , родительский и дочерний компоненты должны быть загружены в main.js. (в моем проекте есть только два файла .js, другой - index.js, который используется для регистрации URL-адреса маршрута - person doUWannaBuildASnowMan; 21.09.2017
comment
Да, вам нужно включить компоненты в main.js. - person Birkhoff Lee; 21.09.2017
comment
Нет, см. codesandbox.io/s/vue-template-oy15j ?fontsize=14 Если ваш родительский компонент импортирует дочерний компонент, все в порядке. - person Blitz; 02.08.2019

arrow_upward
0
arrow_downward

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

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

См. здесь: https://codesandbox.io/s/vue-template-oy15j?fontsize=14

// App.vue
<template>
  <div id="app">
    <parent-component message="Hello Vue !"/>
  </div>
</template>

<script>
import ParentComponent from "./components/ParentComponent";

export default {
  name: "App",
  components: { ParentComponent }
};
</script>

// ParentComponent.vue
<template>
  <child-component>
    <div class="test-parent">{{ message }}</div>
  </child-component>
</template>

<script>
import ChildComponent from "./ChildComponent";

export default {
  name: "ParentComponent",
  components: { ChildComponent },
  props: {
    message: String
  }
};
</script>

// ChildComponent.vue
<template>
  <div class="test-child">
    <slot>default content</slot>
  </div>
</template>

<script>
export default {
  name: "ChildComponent"
};
</script>

<!-- Result -->
<div id="app">
  <div class="test-child">
    <div class="test-parent">Hello Vue !</div>
  </div>
</div>
person Blitz    schedule 02.08.2019