<mark id="oyrth"></mark>
      <tbody id="oyrth"></tbody>
    1. <tbody id="oyrth"></tbody>
        <menuitem id="oyrth"></menuitem>
      1. 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.quanminreliao.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

        标签: VUE 全局变量 局部变量


        Powered by emlog 京ICP备12006971号-1 sitemap
        杀平特一肖-杀平特一肖不出-杀平特一肖公式