zoukankan      html  css  js  c++  java
  • 如何理解vue.js组件的作用域是独立的

    vue.js组件的作用域是独立,可以从以下三个方面理解:

    1、父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据;
    2、子组件模板在子组件作用域内编译,子组件模板的数据用子组件内data数据,如果要用父组件的必须用props传递;
    3、子组件标签的数据,使用父组件内的data数据

    案例代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div id="demo">
        <my-component v-if="show" v-bind:my-message="message">
            <h2 v-if="show">{{message}}</h2>
        </my-component>
    </div>
    <template id="child-component">
        <h1>{{message}} {{myMessage}}</h1>
        <slot v-if="show">this is slot</slot>
    </template>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    var vm = new Vue({
        el : "#demo",
        data : {
            message : "vue",
            show : true
        },
        components : {
            "my-component" : {
                template : "#child-component",
                props : ["myMessage"],
                data : function(){
                    return {
                        message : "vue1",
                        show : true
                    }
                }
            }
        }
    });
  • 相关阅读:
    concurrent模块
    gevent模块
    Python中的线程
    2019.10.22 用TCP实现服务端并发接收
    Python中的进程
    进程和线程
    网络编程常用模块及方法
    [UOJ #222][NOI2016]区间(线段树)
    [BZOJ 4873][SHOI&SXOI2017]寿司餐厅(最大权闭合子图)
    [BZOJ 3751][NOIP2014]解方程(哈希)
  • 原文地址:https://www.cnblogs.com/Free-Thinker/p/10750215.html
Copyright © 2011-2022 走看看