Vue全局变量和局部变量如何实现

蜗牛互联网技术资讯2022-11-18800

这篇文章主要介绍“Vue全局变量和局部变量如何实现”，在日常操作中，相信很多人在Vue全局变量和局部变量如何实现问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”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><h2 @click="fn">呵呵{{msg}}</h2></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">
  <h2>haha</h2>
</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:"<h2>登录组件</h2>"
  })
  Vue.component("register",{
    template:"<h2>注册组件</h2>"
  })
  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:"<h2>登录组件</h2>"
  })
  Vue.component("register",{
    template:"<h2>注册组件</h2>"
  })
  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">
  <h2 @click="change">
    {{ fromfather }}
    子组件的数据
  </h2>
</template>
<template id="grandSon">
  <h2>孙子组件的数据</h2>
</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>