Question

我只是尝试按照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>

虽然代码很短，但我仍然无法找到我的错误

Answer 1

确保在导入Vue的main.js或某个.js文件中包含这两个组件。它应该是这样的：

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

new Vue({
    el: '#app',
    template: '<App/>',
    components: { App, subMenuTemp }
})

Answer 2

您不需要按照其他答案中的说明在主文件中注册所有组件。

您只需像您一样将子组件导入父组件。

在此处查看：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>

Vue.js不能用于<slot>来呈现父组件

2 个答案: