首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue - 父组件数据变化控制子组件类名切换

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

作者头像
xing.org1^
发布2018-09-20 10:35:51
1.4K0
发布2018-09-20 10:35:51
举报
文章被收录于专栏:前端说吧前端说吧

先说当时的思路和实现 核心是父子组件传值和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选择器的嵌套来达到数据不同,样式展示不同的目的,而不一定必要地去改子组件的类名。

【捂脸】

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018-09-18 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档