快捷導(dǎo)航

詳解Vue 全局變量，局部變量

更新時(shí)間：2019年04月17日 16:15:53 作者：weixin_44389107

這篇文章主要介紹了Vue全局變量局部變量，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

局組件和局部組件

1.先定義組件 Vue.component('組件名', { 組件模板對(duì)象 })

注意: 組件名不要使用原生的標(biāo)簽名, 若組件名定義時(shí)用的是駝峰命名法, 則調(diào)用時(shí)用中劃線分割后小寫
例如: 組件-->mtText 使用時(shí)--> <my-text></my-text>

2.配置組件的模板注意: 組件的模板內(nèi)容有且只有一個(gè)根元素

3.在視圖層里調(diào)用 ,用雙標(biāo)簽

4.組件是一個(gè)獨(dú)立的作用域, 也可以看成一個(gè)特殊的vue實(shí)例, 可以有data, methods,computed等等

注意: 組件的data是函數(shù), 函數(shù)中需要返回一個(gè)對(duì)象作為組件的data

全局組件案例

<body>
<div id="app">
  <my-component></my-component>
</div>
<script src="lib/vue-2.4.0.js"></script>
<script>
//全局組件
  Vue.component('myComponent',{
    //1.組件的內(nèi)容/模板
    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:{
      // 組件名: {配置項(xiàng)}
      "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">注冊(cè)</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>注冊(cè)組件</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'">注冊(cè)</a>
  <!-- vue提供了一個(gè)標(biāo)簽 component標(biāo)簽(理解為一個(gè)占位符), 用來(lái)展示對(duì)應(yīng)名稱的組件 :is屬性設(shè)置指定的組件名 -->
  <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>注冊(cè)組件</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 }}
    子組件的數(shù)據(jù)
  </h1>
</template>
<template id="grandSon">
  <h1>孫子組件的數(shù)據(jù)</h1>
</template>
<!--1.子組件不能訪問(wèn)父組件的數(shù)據(jù)
2. 解決辦法: ①在引用子組件時(shí), 通過(guò)屬性綁定 v-bind方法, 把需要傳遞給子組件的數(shù)據(jù)以綁定的形式傳過(guò)來(lái)
       ② 在子組件配置項(xiàng)里添加 props: ['傳遞過(guò)來(lái)的數(shù)據(jù)']-->
<script src="lib/vue-2.4.0.js"></script>
<script>
  let vm = new Vue({
    el:"#app",
    data:{
      father:'啊~~這是父組件的數(shù)據(jù)'
    },
    methods:{
    },
    //局部子組件
    components:{
      // 組件名: {配置項(xiàng)}
      "myComponent":{
        template:'#box1',
        data(){
          return {
            msg:"哈哈"
          }
        },
        //在子組件配置項(xiàng)里添加 props: ['傳遞過(guò)來(lái)的數(shù)據(jù)']
        //注意: 組件中所有的props中的數(shù)據(jù), 都是通過(guò)父組件傳遞給子組件的, props中的數(shù)據(jù)是只讀, 無(wú)法修改
        props:['fromfather'],
        methods:{
          change(){
            // this.fromfather = "被修改了"
          }
        },
        //局部子子組件
        components:{
          'grandSon':{
            template:'#grandSon'
          }
        }
      }
    }
  })
</script>
</body>

以上所述是小編給大家介紹的Vue全局變量局部變量詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: