详解Vue 全局变量,局部变量


Posted in Javascript onApril 17, 2019

局组件和局部组件

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=" rel="external nofollow" rel="external nofollow" flag=true">登录</a>
  <a href="" @click.prevent=" rel="external nofollow" rel="external nofollow" 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>
<body>
<div id="app">
  <a href="" :class=" rel="external nofollow" rel="external nofollow" {red: flag=='login'}" @click.prevent="flag='login'">登录</a>
  <a href="" :class=" rel="external nofollow" rel="external nofollow" {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>

以上所述是小编给大家介绍的Vue全局变量局部变量详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 对象的定义方法
Jan 10 Javascript
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
Mar 24 Javascript
最佳JS代码编写的14条技巧
Jan 09 Javascript
json2.js的初步学习与了解
Oct 06 Javascript
商城常用滚动的焦点图效果代码简单实用
Mar 28 Javascript
JS根据生日算年龄的方法
May 05 Javascript
JavaScript中的prototype原型学习指南
May 09 Javascript
js定义类的几种方法(推荐)
Jun 08 Javascript
ECMAScript6快速入手攻略
Jul 18 Javascript
JS实现间歇滚动的运动效果实例
Dec 22 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
Feb 14 Javascript
基于express中路由规则及获取请求参数的方法
Mar 12 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
Apr 17 #Javascript
Angular Excel 导入与导出的实现代码
Apr 17 #Javascript
详解Vue路由自动注入实践
Apr 17 #Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
Apr 17 #Javascript
js的继承方法小结(prototype、call、apply)(推荐)
Apr 17 #Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
Apr 17 #Javascript
Vue源码探究之虚拟节点的实现
Apr 17 #Javascript
You might like
PHP连接SQLSERVER 注意事项(附dll文件下载)
2012/06/28 PHP
php 表单提交大量数据发生丢失的解决方法
2014/03/03 PHP
JQuery中对Select的option项的添加、删除、取值
2013/08/25 Javascript
jQuery操作JSON的CRUD用法实例
2015/02/25 Javascript
基于javascript代码实现通过点击图片显示原图片
2015/11/29 Javascript
vue子父组件通信的实现代码
2017/07/09 Javascript
ECMAscript 变量作用域总结概括
2017/08/18 Javascript
AngularJS 仿微信图片手势缩放的实例
2017/09/28 Javascript
深入理解JS的事件绑定、事件流模型
2018/05/13 Javascript
微信小程序使用map组件实现路线规划功能示例
2019/01/22 Javascript
微信小程序实现蒙版弹出窗功能
2019/09/17 Javascript
Layui 解决表格异步调用后台分页的问题
2019/10/26 Javascript
Vue中keep-alive组件的深入理解
2020/08/23 Javascript
针对Vue路由history模式下Nginx后台配置操作
2020/10/22 Javascript
[01:12](回顾)DOTA2国际邀请赛,全世界DOTAer的盛宴
2014/07/01 DOTA
[01:18:33]Secret vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
python正则爬取某段子网站前20页段子(request库)过程解析
2019/08/10 Python
Python tkinter实现图片标注功能(完整代码)
2019/12/08 Python
Django ModelForm操作及验证方式
2020/03/30 Python
Windows下Anaconda和PyCharm的安装与使用详解
2020/04/23 Python
在TensorFlow中实现矩阵维度扩展
2020/05/22 Python
解决python运行启动报错问题
2020/06/01 Python
详解Java中一维、二维数组在内存中的结构
2021/02/11 Python
美国最大的团购网站:Groupon
2016/07/23 全球购物
软件测试工程师面试问题精选
2016/10/28 面试题
高中毕业生自我鉴定例文
2013/12/29 职场文书
部队万能检讨书
2014/02/20 职场文书
《生命 生命》教学反思
2014/04/19 职场文书
青年教师师德演讲稿
2014/08/26 职场文书
员工培训协议书
2014/09/15 职场文书
初婚初育证明范本
2014/11/24 职场文书
前台接待员岗位职责
2015/04/15 职场文书
2015年保险公司工作总结
2015/04/24 职场文书
社区低保工作总结2015
2015/07/23 职场文书
初一英语教学反思
2016/02/15 职场文书
Python数据分析之pandas读取数据
2021/06/02 Python