春播网站是谁做的/seo搜索引擎招聘

插槽slot就是在模板中将携带的内容填充进某个指定位置.
带不带内容、带什么内容由父组件来控制，将内容放在哪则由子组件控制。
匿名插槽：无论父组件加了什么全部往里填充，没有指定位置默认是匿名
具名插槽：在插槽中添加name的方式指定位置

匿名插槽

父组件

.<template><div><div>这里是父组件</div><!-- 步骤四:使用子组件,当没有命名时,默认把全部内容填入匿名插槽 --><myhead>这里从父组件引入到子组件的匿名插槽</myhead></div>
</template><script>
// 步骤二:引入子组件
import myhead from "../components/myhead";
export default {components: {//   步骤三:注册子组件myhead,},
};
</script><style>
</style>

子组件

.<template><div class="header"><div>这里是子组件</div><!-- 步骤一:写入slot标签 --><slot></slot></div>
</template><script>
export default {};
</script><style>
</style>

过程图

效果

具名插槽

父组件

语法:父组件<标签 slot=‘命名’>内容<标签>
子组件< slot name="">

.<template><div><!-- 步骤四:使用子组件,当没有命名时,默认把全部内容填入具名插槽 --><myhead><p slot="left">左</p><p slot="center">中</p><p slot="right">右</p></myhead></div>
</template><script>
// 步骤二:引入子组件
import myhead from "../components/myhead";
export default {components: {//   步骤三:注册子组件myhead,},
};
</script><style>
</style>

子组件

.<template><div class="header"><!-- 步骤一:写入slot标签 --><slot name="left"></slot><slot name="center"></slot><slot name="right"></slot></div>
</template><script>
export default {};
</script>.<style lang="less" scoped>
.header {display: flex;
}
</style>

效果