函数式组件中的class与style处理
引言:什么是函数式组件
没有管理任何状态,也没有监听任何传递给它的状态,也没有生命周期方法。实际上,它只是一个接受一些 prop 的函数。在这样的场景下,我们可以将组件标记为 functional,这意味它无状态 (没有响应式数据),也没有实例 (没有 this 上下文)。
一个函数式组件就像这样:
Vue.component('my-component', { functional: true, // Props 是可选的 props: { // ... }, // 为了弥补缺少的实例 // 提供第二个参数作为上下文 render: function (createElement, context) { // ... } })
1. 函数式组件的class和style的数据在哪里?
在context对象的data属性中。
2. class和style的数据在context.data中是如何表现的?
它们以一下形式进行表现。
staticClass?: string; class?: any; staticStyle?: { [key: string]: any }; style?: string | object[] | object;
3. staticClass和class、staticStyle和style的使用场景
我们在使用组件的时候class属性和style属性有以下使用情况。
<my-component class="my-component" :class="{'active':true}" style="width:100%;" :style="{height: '200px'}" > </my-component>
此时context.data内的数据如下:
{ staticClass: "my-component", class: {active: true}, staticStyle: {width: "100%"}, style: {height: "200px"} }
从上面可以发现:
context.data中的staticClass、staticStyle对应DOM元素上的原生class、style属性。
context.data中的class、style对应属性DOM元素上绑定的v-bind:class、v-bind:style。
其中staticStyle为什么会转换为对象,是因为Vue调了parseStyleText方法。
————————————————
版权声明:本文为CSDN博主「ljw1412」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/ljw1412/article/details/106144794/