vue - 父组件数据变化控制子组件类名切换

先说当时的思路和实现 核心是父子组件传值和v-bind指令动态绑定class实现

1. 父组件引用、注册、调用子组件 script中引用

import child from '../components/Child'

export中注册

export
default {
    name: 'Home',
    components: {
        child
    },
}

template中调用(pug写法)

child()

2. 父组件准备数据并处理

data() {
    return {
        classNames: '';
    }
}
created() {
    this.className = 'hhh';
}

3. 父组件传值给子组件

child(v-bind:className = "className")

4. 子组件接收

export
default {
    props: ['className']
}

5. 子组件内部、动态绑定class

div(v-bind:class="['className']")

6. 绑定完毕后,父组件数据变化将影响子组件

但其实后来发现更方便的做法,直接在父组件上动态修改类名,

然后根据css选择器的嵌套来达到数据不同,样式展示不同的目的,而不一定必要地去改子组件的类名。

【捂脸】

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏软件开发

前端MVC Vue2学习总结(五)——表单输入绑定、组件

你可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法...

12530
来自专栏代码世界

前端之BOM和DOM

BOM和DOM简介 BOM(Browser Object Model)是指浏览器对象模型,它使JavaScript有能力与浏览器进行“对话”。 DOM(Docu...

43150
来自专栏技术墨客

React学习(6)—— 高阶应用:非受控组件

在大部分情况下,推荐使用 受控组件 来实现表单、输入框等状态控制。在受控组件中,表单等数据都有React组件自己处理。这里将介绍另外一种非受控组件,表单的数据有...

6720
来自专栏河湾欢儿的专栏

Vue.js组件

组件: 顾名思义, 也就是组成的部件, 即整体的组成部分 这个组成部分是可以缺少的,但是其存在的意义是无可替代的 这个组成部分也是可以复用的 全局方法一:...

23840
来自专栏技术博客

Knockout.Js官网学习(value绑定)

value绑定是关联DOM元素的值到view model的属性上。主要是用在表单控件<input>,<select>和<textarea>上。

9010
来自专栏python3

tkinter -- Event(3)

当按键为 Return 时,由 printReturn 来处理,即由最“近”的那个事件处理

9820
来自专栏技术墨客

React 非受控组件

在大部分情况下,推荐使用 受控组件 来实现表单、输入框等状态控制。在受控组件中,表单等数据都有React组件自己处理。这里将介绍另外一种非受控组件,表单的数据有...

11020
来自专栏从零开始学自动化测试

Selenium2+python自动化73-定位的坑:class属性有空格

前言 有些class属性中间有空格,如果直接复制过来定位是会报错的InvalidSelectorException: Message: The given s...

41140
来自专栏小樱的经验随笔

php实现图形计算器

存档: index.php 1 <html> 2 <head> 3 <title>图形计算器开发</title> 4 ...

56740
来自专栏练小习的专栏

绝对定位bottom值为0的位置问题

有一个position值为absolute的div,他的祖先元素里没有任何定位属性,或者他的父元素就是body。 当这个div的bottom值为0的时候,他应...

21060

扫码关注云+社区

领取腾讯云代金券