追求卓越一诺千金

蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI,好好学习,天天进步!


Vue 全局变量,局部变量

2019-4-18 释然 前端及开发文章及欣赏


如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

全局组件和局部组件
* 1.先定义组件   Vue.component('组件名', { 组件模板对象 })
*   注意: 组件名不要使用原生的标签名, 若组件名定义时用的是驼峰命名法, 则调用时用中划线分割后小写
*                       例如: 组件-->mtText   使用时-->   <my-text></my-text>
* 2.配置组件的模板  注意: 组件的模板内容有且只有一个根元素
* 3.在视图层里调用 ,用双标签
* 4.组件是一个独立的作用域, 也可以看成一个特殊的vue实例, 可以有data, methods,computed等等
*   注意: 组件的data是函数, 函数中需要返回一个对象作为组件的data
全局组件案例

<body>
<div id="app">
    <my-component></my-component>
</div>
<script src="lib/vue-2.4.0.js"></script>
<script>
//全局组件
    Vue.component('myComponent',{
        //1.组件的内容/模板
        template: '<div><div>头部组件</div><h1 @click="fn">呵呵{{msg}}</h1></div>',
        data(){
            return {
                msg:'hello,组件'
            }
        },
        methods:{
            fn(){
                console.log(this.msg);
            }
        }
    })
    let vm = new Vue({
        el:"#app",
        data:{
        },
        methods:{

        },

    })
</script>
</body>
局部组件案例

<body>
<div id="app">
    <my-component></my-component>
    <my-test></my-test>
</div>
<template id="box1">
    <h1>haha</h1>
</template>
<template id="box2">
    <div>
        <ul>
            <li v-for="item in arr">
                {{ item }}
            </li>
        </ul>
    </div>
</template>
<script src="lib/vue-2.4.0.js"></script>
<script>
let vm = new Vue({
        el:"#app",
        data:{
        },
        methods:{

        },
        //局部子组件
        components:{
            // 组件名: {配置项}
            "myComponent":{
                template:'#box1',
                data(){
                    return {
                        msg:"哈哈"
                    }
                }
            },
            "myTest":{
                template:"#box2",
                data(){
                    return {
                        arr:[1,2,3,4]
                    }
                }
            }
        }
    })
</script>
</body>
组件切换:法一

<body>
<div id="app">
    <a href="" @click.prevent="flag=true">登录</a>
    <a href="" @click.prevent="flag=false">注册</a>
    <login v-if="flag"></login>
    <register v-else="flag"></register>
</div>
<script src="lib/vue-2.4.0.js"></script>
<script>
    Vue.component("login",{
        template:"<h1>登录组件</h1>"
    })
    Vue.component("register",{
        template:"<h1>注册组件</h1>"
    })
    let vm = new Vue({
        el:"#app",
        data:{
            flag: false
        },
        methods:{
        },
    })
</script>
</body>
组件切换:法二

 <style>
        .red{
            color:red;
        }
        .v-enter{
            opacity:0;
            transform: translateX(150px);
        }
        .v-leave-to{
            opacity:0;
            transform: translateX(-150px);
        }
        .v-enter-active,
        .v-leave-active{
            transition: all 0.5s;
            position: absolute;
        }
    </style>
</head>
<body>
<div id="app">
    <a href="" :class="{red: flag=='login'}" @click.prevent="flag='login'">登录</a>
    <a href="" :class="{red: flag=='register'}" @click.prevent="flag='register'">注册</a>
    <!--  vue提供了一个标签  component标签(理解为一个占位符), 用来展示对应名称的组件  :is属性设置指定的组件名  -->
    <transition>
        <component :is="flag"></component>
    </transition>
</div>
<script src="lib/vue-2.4.0.js"></script>
<script>
    Vue.component("login",{
        template:"<h1>登录组件</h1>"
    })
    Vue.component("register",{
        template:"<h1>注册组件</h1>"
    })
    let vm = new Vue({
        el:"#app",
        data:{
            flag: "login"
        },
        methods:{

        },
    })
</script>
</body>
父组件向子组件传值

<body>
<div id="app">
    <my-component :fromfather="father"></my-component>
</div>
<template id="box1">
    <h1 @click="change">
        {{ fromfather }}
        子组件的数据
    </h1>
</template>
<template id="grandSon">
    <h1>孙子组件的数据</h1>
</template>
<!--1.子组件不能访问父组件的数据
2. 解决办法: ①在引用子组件时, 通过属性绑定 v-bind方法, 把需要传递给子组件的数据以绑定的形式传过来
              ② 在子组件配置项里添加 props: ['传递过来的数据']-->
<script src="lib/vue-2.4.0.js"></script>
<script>
    let vm = new Vue({
        el:"#app",
        data:{
            father:'啊~~这是父组件的数据'
        },
        methods:{
        },
        //局部子组件
        components:{
            // 组件名: {配置项}
            "myComponent":{
                template:'#box1',
                data(){
                    return {
                        msg:"哈哈"
                    }
                },
                //在子组件配置项里添加 props: ['传递过来的数据']
                //注意: 组件中所有的props中的数据, 都是通过父组件传递给子组件的, props中的数据是只读, 无法修改
                props:['fromfather'],
                methods:{
                    change(){
                       // this.fromfather = "被修改了"
                    }
                },
                //局部子子组件
                components:{
                    'grandSon':{
                        template:'#grandSon'
                    }
                }
            }
        }
    })
</script>
</body>
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

标签: VUE 全局变量 局部变量 « B端产品 — 浅谈Atlas设计思路 | 干货来袭!淘宝设计师谈动效的高效设计与交付»


订阅Rss