vue 子组件如何获取父组件设置的 class 和 style 属性

Vanghohs
  • 183

如题。

vue定义组件时,不能指定名称为 'class' 或 'style'的属性,因为这两个是'保留字'。
但在父组件想使用子组件时,使用 class="" 或 style="", 子组件根据父组件设置的class 、style再进行设置。

如何在子组件获取这两个属性呢?

(不懂的别乱回复)

clipboard.png

上图的带下划线字体,是一个基础的输入组件(有很多nb的功能,可以在html中像编辑word那样编辑)。 父组件调用时,也能直接通过class / style 设置字体字号、颜色等。

clipboard.png

但是日期组件为了省事儿没有自己做, 使用了element 的date, 并再一次封装,通过css改变了显示样式,点击能弹出日期选择框。 如上图。

问题是, 再次封装的组件,只能在封装的时候定义好了 字体、字号等等样式。 父组件调用 my-date 时,默认无法设置 class 或者 style

回复
阅读 19.4k
6 个回答

我简单写了一个,不知道你是不是想实现这样的效果。

父组件调用子组件
<com-box v-bind:title="title" v-bind:content="content" class="box-class" style="font-size: 30px;"></com-box>
子组件内容
<template>
  <div class="box-container">
    <div class="content">
      <h4>{{title}}</h4>
      <p>{{content}}</p>
    </div>
  </div>
</template>
<script type="text/javascript">
export default {
  name: 'Box',
  data() {
    return {
      name: 'box'
    }
  },
  props: ['title', 'content'],
  methods: {},
  created() {
    console.log('created')
  },
  mounted() {
    // 这里获取父组件设置的style,然后修改自组件的样式 
    var fontSize = this.$el.style.fontSize
      var h = this.$el.getElementsByTagName('p')[0]
      h.style.fontSize = fontSize
  },
  methods: {
    // 还可以写在方法里,供父组件调用
      setFont () {
          var fontSize = this.$el.style.fontSize
          var h = this.$el.getElementsByTagName('p')[0]
          h.style.fontSize = fontSize
      }
  }
}
</script>

子组件 data() {} 里面.
this.$vnode.data 就有这个节点用于 createElement 的属性

思路就不对,以数据为核心去驱动视图,而不要用样式上的表现去控制其他样式。

由于vue的特点决定了,你使用vue,想要操作dom,必须对原生js熟悉,至少js操作dom你最低得知道怎么去查api。
或者简单粗暴引入jquery或zepto

1.prop传值
2.$ref设置子组件的值或调用方法

参考下iview组件设置class-name的方法。通过props接收需要制定的class或者style对象。但是不建议这么做。父组件为毛要传class给字组件? 传状态给子组件 让子组件自己玩不好么.
......
这是第三次编辑.
目测你使用的是类似quillEditor之类的富文本编辑器.内部应该有处理很多样式,类似bootstrap的预制类名.
按照你所说的,你对element的date组件进行了二次封装,有重写覆盖css来达到某些显示效果.
但是是写死的,你想达到那个富文本编辑器的效果,通过class改变date组件的显示样式.所以才来问的如何获取父组件设置的class跟style,对么?
但是class要么在父组件写好,要么子组件本身有对应的样式,class才能生效.
style就暴力点,直接生效在子组件最外层的标签上.

那么结论就很明显了
1、二次封装的时候仿照那些组件,提前写一大推的class,很显然,不合适
2、组件接受props,可以整个接受style的object写法,也可以分拆属性,fontSize color等等
3、如果以上都不合适,那我就不懂你到底要解决什么问题了。需要你继续补充说明清楚你的需求。

PS: 看了下你以前的帖子,来这里是想找解决问题的办法或者思路,确实有些指手画脚没点实际的家伙不讨喜,因为他们也不太熟,别去介意就好。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏