vue 修改引入组件的样式_vue子组件的子组件布局

vue 修改引入组件的样式_vue子组件的子组件布局意义vue被广大前端推崇很重要一点就是组件封装,但是在组件封装的时候,组件可能在各处都要用到,但是在各处的样式可能不太一样,例如:按钮组件,这时怎么办,难道不同样式但是结构相同的组件进行多次封装么?很明显是很不合算的。用代码说话父组件:<template><el-containerclass=”layout_container”><el-headerheight=”auto”><header-top></header-top&

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

意义

vue被广大前端推崇很重要一点就是组件封装,但是在组件封装的时候,组件可能在各处都要用到,但是在各处的样式可能不太一样,例如:按钮组件,这时怎么办,难道不同样式但是结构相同的组件进行多次封装么?很明显是很不合算的。

用代码说话

父组件:

<template>
  <el-container class="layout_container">
    <el-header height="auto"><header-top></header-top></el-header>
    <el-container>
      <el-aside width="auto"><aside-left></aside-left></el-aside>
      <el-main>
        <zonghe-nengli></zonghe-nengli>
       /重点看此处:
        <my-button
          :title="biaoti"
          :color="activeColor"
          :size="fontSize"
        ></my-button>
        ///
        <skill-hot></skill-hot>
        <learning-path></learning-path>
        <bar-chart></bar-chart>
        <radar></radar>
        <tupu-fenxi></tupu-fenxi>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import HeaderTop from "../../components/layout/header";

import MyButton from "../../components/common/button";

import AsideLeft from "../../components/layout/aside";
import ZongheNengli from "../../components/common/zonghenengli";
import Radar from "../../components/common/radar";
import TupuFenxi from "../../components/common/tupufenxi";
import SkillHot from "../../components/putong/skillhot";
import LearningPath from "../../components/putong/learningpath";
import BarChart from "../../components/common/barchart";
export default { 
   
  components: { 
   
    HeaderTop,
    AsideLeft,
    ZongheNengli,
    Radar,
    TupuFenxi,
    SkillHot,
    LearningPath,
    BarChart,
    MyButton,
  },
  data() { 
   
    return { 
   
    ///
      biaoti: 20,
      activeColor: "black",
      fontSize: 30,
   ///
    };
  },
  created() { 
   },
  methods: { 
   },
  computed: { 
   },
};
</script>
<style scoped>
.layout_container { 
   
  height: 100%;
}
.el-aside { 
   
  margin-top: 21px;
  background: #ffffff;
  box-shadow: 0px 1px 13px 0px rgba(0, 0, 0, 0.35);
}
.el-main { 
   
  margin-top: 40px;
  margin-left: 37px;
  background-color: burlywood;
}
</style>

子组件(重点看看):

<template>
  <div class="button_container" :style="{color:activeColor,fontSize:fontSize + 'px'}">
    { 
   { 
    title }}
  </div>
</template>
<script>
export default { 
   
  /接受传过来的参数
  props: ["title","color","size"],
  data() { 
   
    return { 
   
      activeColor: this.color,
      fontSize: this.size,
    };
  },
  created() { 
   
    
  },
  methods: { 
   },
  computed: { 
   },
};
</script>
<style scoped>
.button_container { 
   
  width: 207px;
  height: 60px;
  margin: 35px;
  line-height: 60px;
  text-align: center;
  background: #2e5afb;
  box-shadow: 3px 8px 17px 1px rgba(46, 90, 251, 0.6);
  border-radius: 6px;
}
</style>

效果图:
在这里插入图片描述

想要封装可以动态改变样式的组件,必须得熟练掌握vue组件的class和style绑定,这样才能游刃有余

2、除了这中传值来改变组件样式,当然还是通过行内样式,或者给组件添加一个class类来改变组件样式
当在一个自定义组件上使用 class property 时,这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖。

//1、行内样式
<tupu-fenxi style="margin: 10px 0 0 3px"></tupu-fenxi>


//1、添加类名
Vue.component('my-component', { 
   
  template: '<p class="foo bar">Hi</p>'
})
//然后在使用它的时候添加一些 class:
<my-component class="baz boo"></my-component>
//HTML 将被渲染为:
<p class="foo bar baz boo">Hi</p>


//3、对于带数据绑定 class 也同样适用:
<my-component v-bind:class="{ active: isActive }"></my-component>
//当 isActive 为 truthy 时,HTML 将被渲染成为:
<p class="foo bar active">Hi</p>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/193248.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Java线程同步:synchronized锁住的是代码还是对象

    Java线程同步:synchronized锁住的是代码还是对象在Java中,synchronized关键字是用来控制线程同步的,就是在多线程的环境下,控制synchronized代码段不被多个线程同时执行。Synchronized既可以对代码块使用,也可以加在整个方法上。 关键是,不要认为给方法或者代码段加上synchronized就万事大吉,看下面一段代码:classSync{ publicsynchronizedvoidtest

  • Vue常用指令(一)

    Vue常用指令(一)1、v-once 只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。代码:<body><div id=”app”> <p v-once>原始值: {{msg}}</p> <p>后面的: {{msg}}</p> <input typ…

  • Ubuntu系统的基础操作–入门

    Ubuntu系统的基础操作–入门

  • Hibernate进阶之如何使用Hql内连接,外连接以及自连接

    Hibernate进阶之如何使用Hql内连接,外连接以及自连接

  • 面试题vue双向绑定原理_vue路由面试题

    面试题vue双向绑定原理_vue路由面试题引言:vue的双向绑定原理简单来说就是:vue内部使用object.defineProperty方法给所有数据加上getter和setter方法,在数据发生改变时发布消息给订阅者Watcher,触发响应的监听回调。object.defineProperty是JS里一个重要的方法,vue的双向绑定ES6里一些方法都是靠它实现的。如图所示zuoerobject.defineProperty…

    2022年10月17日
  • PyCharm导入本地模块

    PyCharm导入本地模块1.首先进入PyCharm的设置面板2.进入后点击Porjectinterpreter,点击右上角的add3.点击Existingenvironment这个选项,然后选择interpreter4.在弹出来的窗口中选择你的python安装目录关于查找目录位置,在windows中可以打开cmd然后输入wherepythonmacos中可以打开终端输入whichp…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号