zoukankan      html  css  js  c++  java
  • 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选择器的嵌套来达到数据不同,样式展示不同的目的,而不一定必要地去改子组件的类名。

    【捂脸】

  • 相关阅读:
    URI 和 URL
    TCP/IP协议
    TCP/IP 通信传输流
    Python 之 函数可变参数和关键字参数
    Python 之装饰器decorator
    Python 之进程
    Android
    Redis持久化(persistence)
    python正则表达式
    selenium+python定位iframe元素
  • 原文地址:https://www.cnblogs.com/padding1015/p/9669684.html
Copyright © 2011-2022 走看看