脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue全局变量局部变量

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

 更新时间：2019年04月17日 16:15:53   作者：weixin_44389107  
这篇文章主要介绍了Vue全局变量局部变量，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

局组件和局部组件

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全局变量局部变量详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • Vue动态组件与内置组件浅析讲解

    Vue动态组件与内置组件浅析讲解

    闲话少说，我们进入今天的小小五分钟学习时间，前面我们了解了vue的组件，我们本文主要是讲解vue的动态组件和内置组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • 深入浅析Vue组件开发

    深入浅析Vue组件开发

    本文是主要介绍基于Vue的一个组件开发。本文给大家介绍的非常详细，具有参考借鉴价值，需要的朋友参考下吧
    2016-11-11
  • 在elementui中Notification组件添加点击事件实例

    在elementui中Notification组件添加点击事件实例

    这篇文章主要介绍了在elementui中Notification组件添加点击事件实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue学习笔记之给组件绑定原生事件操作示例

    vue学习笔记之给组件绑定原生事件操作示例

    这篇文章主要介绍了vue学习笔记之给组件绑定原生事件操作,结合实例形式详细分析了vue.js组件绑定原生事件相关原理、实现方法与操作注意事项,需要的朋友可以参考下
    2020-02-02
  • 关于vue.js中实现方法内某些代码延时执行

    关于vue.js中实现方法内某些代码延时执行

    今天小编就为大家分享一篇关于vue.js中实现方法内某些代码延时执行，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue项目中如何将当前页面生成图片

    vue项目中如何将当前页面生成图片

    这篇文章主要介绍了vue项目中如何将当前页面生成图片问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue修改vue项目运行端口号的方法

    vue修改vue项目运行端口号的方法

    本篇文章主要介绍了vue修改vue项目运行端口号的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 深入理解Vue keep-alive及实践总结

    深入理解Vue keep-alive及实践总结

    这篇文章主要介绍了深入理解Vue keep-alive及实践总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • vue点击当前路由高亮小案例

    vue点击当前路由高亮小案例

    这篇文章主要为大家详细介绍了vue点击当前路由高亮小案例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-09-09
  • element-table如何实现自定义表格排序

    element-table如何实现自定义表格排序

    这篇文章主要介绍了element-table如何实现自定义表格排序，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-07-07

最新评论