Question

我的vue应用程序的结构如下：

root.vue：

<template>

<header-yo> <h1> visible? or not? </h1> </header-yo> //content btw tags is invisible
<footer> </footer>

</template>

<script>
import Footer from "./components/footer";
import Header from "./components/header";

export default {
  components: {
    "footer": Footer,
    "header-yo": Header  // header-yo is "custom tag" now!
  }
};
</script>

<style> ...</style>

头：

<template>
 <h1>rrrrr</h1> //this is visible

</template>

<script> </script>

<style scoped>  </style>

当我们创建此自定义标记时，＃34;＆＃34; - 它只作为组件的声明者？

btw自定义标签中什么都没有添加？因为我只能在网页上看到我的实际header.vue文件中的内容，而不是我自己的自定义标记内的内容。这是vue-idiomatic风格吗？拥有所有其他组件的root.vue只是将事物放在一起，没有什么可以进入btw自定义标签 - 它们只显示哪些组件\其他vue文件在那里？如果我想在标题中添加内容 - 它应该放在相应的单独header.vue文件中？

js小提琴是here

Answer 1

您尝试做的与AngularJS转换机制相当。您需要使用<slot></slot>元素实际告诉vuejs将内容插入到模板中的位置：

<template>
  <h1>rrrrr</h1> // this is visible
  <slot></slot>  // this is where "<h1> visible? or not? </h1>" would be inserted
</template>

您可以在vuejs component guide或dedicated Slot documentation page中找到更多相关信息。

自定义标签之间没有任何东西 - <mytag_vue> ... <！---->在vue js中？

1 个答案: