详解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 相关文章推荐
JS+ACTIVEX实现网页选择本地目录路径对话框
Mar 18 Javascript
js简单实现HTML标签Select联动带跳转
Oct 23 Javascript
jQuery中$(function() {});问题详解
Aug 10 Javascript
Js 获取当前函数参数对象的实现代码
Jun 20 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
May 28 Javascript
Angular2 父子组件通信方式的示例
Jan 29 Javascript
基于vue2.0动态组件及render详解
Mar 17 Javascript
Vue刷新修改页面中数据的方法
Sep 16 Javascript
vue根据进入的路由进行原路返回的方法
Sep 26 Javascript
JS获取月的第几周和年的第几周实例代码
Dec 05 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
May 10 Javascript
JavaScript怎样在删除前添加确认弹出框?
May 27 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
WINDOWS下php5.2.4+mysql6.0+apache2.2.4+ZendOptimizer-3.3.0配置
2008/03/28 PHP
解析php中如何调用用户自定义函数
2013/08/06 PHP
php简单的留言板与回复功能具体实现
2014/02/19 PHP
PHP实现的增强性mhash函数
2015/05/27 PHP
WordPress中对访客评论功能的一些优化方法
2015/11/24 PHP
用ADODB.Stream转换
2007/01/22 Javascript
让textarea控件的滚动条怎是位与最下方
2007/04/20 Javascript
jquery.validate使用攻略 第三部
2010/07/01 Javascript
jquery 删除字符串最后一个字符的方法解析
2014/02/11 Javascript
jQuery中:animated选择器用法实例
2014/12/29 Javascript
JavaScript获取表单enctype属性的方法
2015/04/02 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
2015/08/13 Javascript
Flow之一个新的Javascript静态类型检查器
2015/12/21 Javascript
利用纯Vue.js构建Bootstrap组件
2016/11/03 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
2017/04/04 jQuery
angular实现spa单页面应用实例
2017/07/10 Javascript
webpack打包js的方法
2018/03/12 Javascript
详解如何在微信小程序中愉快地使用sass
2018/07/30 Javascript
基于element-ui的rules中正则表达式
2018/09/04 Javascript
Vue和React组件之间的传值方式详解
2019/01/31 Javascript
javascript中floor使用方法总结
2019/02/02 Javascript
ES6模板字符串和标签模板的应用实例分析
2019/06/25 Javascript
React+TypeScript+webpack4多入口配置详解
2019/08/08 Javascript
微信小程序开发(二):页面跳转并传参操作示例
2020/06/01 Javascript
Python中用于转换字母为小写的lower()方法使用简介
2015/05/19 Python
Python基于生成器迭代实现的八皇后问题示例
2018/05/23 Python
Matplotlib 生成不同大小的subplots实例
2018/05/25 Python
Python基于requests库爬取网站信息
2020/03/02 Python
Canvas实现贝赛尔曲线轨迹动画的示例代码
2019/04/25 HTML / CSS
MaBelle玛贝尔香港官网:香港钻饰连锁店
2019/09/09 全球购物
JENNIFER BEHR官网:各种耳环和发饰
2020/06/07 全球购物
酒店公关部经理岗位职责
2013/11/24 职场文书
党的群众路线批评与自我批评范文
2014/10/16 职场文书
农村党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
研究生导师评语
2014/12/31 职场文书
2016年学习贯彻十八届五中全会精神心得体会
2016/01/05 职场文书