详解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 相关文章推荐
ExtJS 2.2.1的grid控件在ie6中的显示问题
May 04 Javascript
奉献给JavaScript初学者的编写开发的七个细节
Jan 11 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
Dec 17 Javascript
JavaScript地图拖动功能SpryMap的简单实现
Jul 17 Javascript
javascript中定义类的方法详解
Feb 10 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
Mar 14 Javascript
js预加载图片方法汇总
Jun 15 Javascript
超赞的动手创建JavaScript框架的详细教程
Jun 30 Javascript
js与applet相互调用的方法
Jun 22 Javascript
bootstrap-table组合表头的实现方法
Sep 07 Javascript
vue+axios+promise实际开发用法详解
Oct 15 Javascript
jQuery分组选择器简单用法示例
Apr 04 jQuery
基于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中使用与Perl兼容的正则表达式
2006/11/26 PHP
PHP curl实现抓取302跳转后页面的示例
2014/07/04 PHP
php smtp实现发送邮件功能
2017/06/22 PHP
PHP实现创建微信自定义菜单的方法示例
2017/07/14 PHP
JS 中document.URL 和 windows.location.href 的区别
2009/11/11 Javascript
基于Jquery+Ajax+Json的高效分页实现代码
2011/10/29 Javascript
Jquery倒数计时按钮setTimeout的实例代码
2013/07/04 Javascript
JS拖拽插件实现步骤
2015/08/03 Javascript
JS+CSS实现六级网站导航主菜单效果
2015/09/28 Javascript
javascript中new关键字详解
2015/12/14 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
2016/05/18 Javascript
Javascript之Number对象介绍
2016/06/07 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
2016/10/24 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
2016/12/22 Javascript
ES6学习之变量的两种命名方法示例
2017/07/18 Javascript
vue项目优化之通过keep-alive数据缓存的方法
2017/12/11 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
2018/08/28 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
2018/12/25 Javascript
详解JavaScript 的变量
2019/03/08 Javascript
jQuery中event.target和this的区别详解
2020/08/13 jQuery
python计算日期之间的放假日期
2018/06/05 Python
Python MongoDB 插入数据时已存在则不执行,不存在则插入的解决方法
2019/09/24 Python
python动态文本进度条的实例代码
2020/01/22 Python
Python实现Canny及Hough算法代码实例解析
2020/08/06 Python
详解matplotlib绘图样式(style)初探
2021/02/03 Python
html5+css3之制作header实例与更新
2020/12/21 HTML / CSS
简述数据库的设计过程
2015/06/22 面试题
几道Java和数据库的面试题
2013/05/30 面试题
施工安全生产承诺书
2014/05/23 职场文书
教师反腐倡廉演讲稿
2014/09/03 职场文书
自主招生自荐信格式范文
2015/03/25 职场文书
培训通知书模板
2015/04/17 职场文书
纪检部部长竞选稿
2015/11/21 职场文书
某学校的2019年度工作报告范本
2019/10/11 职场文书
springboot中一些比较常用的注解总结
2021/06/11 Java/Android
python pygame 开发五子棋双人对弈
2022/05/02 Python