Vue 全局变量，局部变量

最新推荐文章于 2022-09-09 22:29:21 发布
最新推荐文章于 2022-09-09 22:29:21 发布
阅读量3.2k 收藏 2
点赞数

全局组件和局部组件

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>

作者：weixin_44389107
来源：CSDN
原文：https://blog.csdn.net/weixin_44389107/article/details/89192803
版权声明：本文为博主原创文章，转载请附上博文链接！

逆魂夜
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue中定义全局变量与常量的各种方式详解
2401_84446712的博客
04-27 1117
从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】个人将这段时间所学的知识，分为三个阶段：第一阶段：HTML&CSS&JavaScript基础第二阶段:移动端开发技术第三阶段:前端常用框架推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；
详解Vue 全局变量，局部变量
10-17
主要介绍了Vue全局变量局部变量，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
9. VUE全局变量与局部变量---(vue入门 文档学习记录)
爱飞的笨鸟的博客
06-24 1775
转自:https://www.cnblogs.com/webxu20180730/p/10890888.html 作用域: 全局作用域：Vue对象 全局api 局部作用域： 实例对象vm 实例api 组件component 组件配置选项 在引入Vue文件时，就相当于拥有了一个全局Vue对象。 在var vm = new Vu...
vue全局变量和局部变量,给vue定义全局的方法
神器榜
09-09 2824
typescript有哪些版本，typescript是什么。原理：设置一个专用的的全局变量模块文件，模块里面定义一些变量初始状态，用exportdefault暴露出去，在里面使用Vue.prototype挂载到vue实例上面或者在其它地方需要使用时，引入该模块便可。全局变量模块文件：文件：constserverSrc='';constuserSite="中国钓鱼岛";
在vue里面设置全局变量或数据的方法
08-27
在Vue.js框架中，设置全局变量或数据是十分常见的需求，这可以帮助我们在多个组件之间共享信息，提升代码的复用性和协同性。在Vue 2.x版本中，我们可以利用插件系统来实现这一功能。下面将详细介绍如何在Vue中设置...
vue项目消息链接全局创建监听
05-24
3. **全局消息**：在Vue项目中，为了在整个应用范围内共享WebSocket实例，通常会将它设置为全局变量。在这个例子中，`global.js`文件定义了一个对象`ws`，并在`main.js`中将其挂载到Vue原型链上，通过`Vue.prototype...
Vue之mixin全局的用法详解
10-18
Vue的全局`mixin`是通过`Vue.mixin()`方法实现的，它接收一个对象作为参数，这个对象包含要混合到所有Vue实例中的属性和方法。例如： ```javascript const mixin = { methods: { formatDate(date, fmt = 'YYYY年M...
成员变量、局部变量和全局变量
12-28 1859
// // main.m // OC语言学习 #import @interface Person : NSObject { // int age = 10; /* 写在类声明的大括号中的变量，我们称之为 成员变量（属性/实例变量） 成员变量只能通过对象访问 注意：成员变量不能离开类，离开类之后就不是成员变量。
vue脚手架 全局变量可以是变量吗_详解Vue 全局变量，局部变量
weixin_28972687的博客
02-22 147
局组件和局部组件1.先定义组件 vue.component('组件名', { 组件模板对象 })注意: 组件名不要使用原生的标签名, 若组件名定义时用的是驼峰命名法, 则调用时用中划线分割后小写例如: 组件-->mttext 使用时--> 2.配置组件的模板 注意: 组件的模板内容有且只有一个根元素3.在视图层里调用 ,用双标签4.组件是一个独立的作用域, 也可以看成一个...
vue-01-es6的基本语法、全局和局部变量和作用域、es5和es6的函数对比、自定义对象中封装函数的写法、vue使用、Vue指令系统的常用指令
Hi文的博客
10-15 907
一、es6的基本语法 1.let是局部作用域,let代码块内部生效,外部不能使用这个变量 if (1){ let b = 'xxx'; } console.log(b); //报错 if (1){ var a = 'xxx'; } console.log(a); //xxx 可以使用,但是函数不行 2.不存在变量提升 console.log(xx); //undefined var xx = 'oo'; console.log(xxx); //报错 let xxx = 'ooo';
Vue的var、let和const定义变量
优氪时
04-21 7213
开始学习Vue，接触到了ES6。以前使用的JavaScript，定义变量使用的var，现在Vue中还使用let 和 const来定义变量。 var var定义的变量可以修改，如果不初始化会输出undefined，不会报错 var a = 1; // var a;//不会报错 console.log('函数外var定义a:' + a);//可以输出a=1 function change(){ a = 4; console.log('函数内var定义a:' + a);//可以输出a=4 }
自定义v-model事件
Pgy121的博客
09-08 3156
父组件 <template> <div class="home"> <p>{{name}}</p> <v-model v-model="name"></v-model> </div> </template> <script> import vModel from '@/components/HelloWorld' export default { name: 'home',
2.0vue.js 局部变量 这种比较常用
weixin_38337068的博客
07-22 2593
我是组件                 {{wo}}                                                         {{hj}}                                       Vue.component('aaa',{              data(){
Vue2 局部自定义指令 / 全局自定义指令
技术前端，忠于热爱 @0.活在风浪里
12-06 3715
全局自定义指令 1 在mian.js写 2 在需要的组件使用 局部自定义指令 directives全局没有s 局部加s 写法也不同 script> export default { data() { return { color: "red",//为 变量背景色局部自定义指令 写值 }; }, methods: {}, components: {}, created() {}, //局部 的自定义指令directives与da.
vue中如何定义全局变量 和全局函数
zhaofeiweb的博客
09-29 1568
定义全局变量 原理： 设置一个专用的的全局变量模块文件，模块里面定义一些变量初始状态，用export default 暴露出去，在main.js里面使用Vue.prototype挂载到vue实例上面或者在其它地方需要使用时，引入该模块便可。 全局变量模块文件： Global.vue文件：   &lt;script&gt; const serverSrc='www.ba...
vue 全局变量与局部变量
最新发布
07-25
Vue中的全局变量和局部变量在使用上有一些区别。 全局变量是指在整个Vue应用中都可以访问的变量。你可以在Vue实例或Vue组件中定义全局变量，然后在应用的任何地方都可以使用它们。通常情况下，全局变量会被定义在Vue实例的`data`属性中或者使用Vue插件的方式进行全局注册。 下面是一个在Vue实例中定义全局变量的例子： ```javascript new Vue({ data: { globalVar: 'This is a global variable' }, // ... }) ``` 在组件中使用这个全局变量时，可以通过`this.$root.globalVar`来访问。 局部变量是指仅在当前组件中可用的变量。你可以在组件的`data`属性中定义局部变量，然后只能在该组件的模板或方法中使用。这些变量不会对其他组件产生影响。 下面是一个定义局部变量的示例： ```javascript Vue.component('my-component', { data: function() { return { localVar: 'This is a local variable' }; }, // ... }); ``` 在组件模板中使用这个局部变量时，可以通过`{{ localVar }}`来访问。 需要注意的是，尽管全局变量和局部变量可以在不同的组件间传递数据，但为了更好地管理组件间的数据流动，建议使用Vue中的状态管理工具（如Vuex）或事件总线（如Vue实例的`$emit`和`$on`方法）来进行数据的传递和共享。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值