如何在Vuejs中从其父组件设置嵌套组件的样式? [英] How to style a nested component from its parent component in Vuejs?
问题描述
我将使用 Vuejs 使用 flexbox 创建一个布局，例如header sidebar main-content sidebar footer".我为布局的每个部分创建了单独的 .vue 文件，我的意思是像 sidebar.vue 和 header.vue 等等......
我将在 App.vue 文件中使用它们，例如:
<div id="应用程序"><app-header></app-header><app-sidebar></app-sidebar><app-content></app-content><app-sidebar></app-sidebar><app-footer></app-footer><脚本>从./components/header"导入头文件；从./components/sidebar"导入侧边栏；从./components/content"导入内容；从./components/footer"导入页脚；导出默认{成分: {应用标题":标题，应用侧边栏":侧边栏，应用内容":内容，应用页脚":页脚}};<style lang="scss">身体 {边距:0；填充:0；}#应用程序 {边框:3px纯红色；最小高度:100vh；显示:弹性；flex-wrap: 包裹;>* {边框:1px纯黑色；}}
主要问题是我无法从 App.vue 文件中选择这些自定义嵌套组件来设置它们的样式.例如，我不能像 html 和 css 中的其他普通标签一样使用 app-header{} 来选择它并在 App.vue 文件内的样式标签中设置它的样式.有没有办法解决它?
注意:我知道我可以为这些嵌套组件中的每一个分配一个类，然后选择它们与 css 类选择器一起使用.
我会通过在每个子组件中创建一个属性来处理这个问题(可能是 HeaderClass、BodyClass， 等等).这样，任何使用这些子组件的组件都可以传递他们想要的任何类并相应地设置它们的样式.
</app-header> 在您的子组件内部，您可以使用这些属性和 v-bind HTML 内部的类，如下例所示:
<div :class=`${headerClass} 内部类示例按钮`>注意:这不允许您使用任何作用域父级 CSS 传递给子级.你传下来的类必须是全局的.否则，子组件将不知道它是什么.
I am going to create a layout like 'header sidebar main-content sidebar footer ' with flexbox by Vuejs.
I created separate .vue files for each part of the layout , I mean something like a sidebar.vue and a header.vue and so on ....
And I am going use them in App.vue file like :
<template>
<div id="app">
<app-header ></app-header>
<app-sidebar></app-sidebar>
<app-content></app-content>
<app-sidebar></app-sidebar>
<app-footer></app-footer>
</div>
</template>
<script>
import header from "./components/header";
import sidebar from "./components/sidebar";
import content from "./components/content";
import footer from "./components/footer";
export default {
components: {
"app-header": header,
"app-sidebar": sidebar,
"app-content": content,
"app-footer": footer
}
};
</script>
<style lang="scss">
body {
margin: 0;
padding: 0;
}
#app {
border: 3px solid red;
min-height: 100vh;
display: flex;
flex-wrap: wrap;
> * {
border: 1px solid black;
}
}
the main problem is I can not select these custom nested components from App.vue file to style them. for example i can not use app-header{} like other normal tags in html and css to select it and style it within style tags inside of App.vue file . is there anyway to solve it ?
NOTE : I know I can assign a class to each of these nested components and then select them to use with css class selector .
I would handle this by creating a property in each of the child components (maybe HeaderClass, BodyClass, and so on). That way, any component that consumes these child components can pass whatever classes they desire and style them accordingly.
<app-header :headerclass="parent-header-class"> </app-header>
Inside of your child component, you can use these properties and v-bind the class inside the HTML, as shown in the example below:
<template>
<div :class=`${headerClass} internal-class-example button`> </div>
</template>
Note: This does not allow you to use any scoped parent CSS to pass to the child. The classes you pass down must be global. Otherwise, the child component will not know what it is.
这篇关于如何在Vuejs中从其父组件设置嵌套组件的样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
