欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue組件數(shù)據(jù)傳遞、父子組件數(shù)據(jù)獲取，slot,router路由功能示例

 更新時(shí)間：2019年03月19日 09:45:56   作者：白楊-M  
這篇文章主要介紹了vue組件數(shù)據(jù)傳遞、父子組件數(shù)據(jù)獲取，slot,router路由功能,結(jié)合實(shí)例形式分析了vue.js組件數(shù)據(jù)傳遞、路由相關(guān)概念、原理及相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了vue組件數(shù)據(jù)傳遞、父子組件數(shù)據(jù)獲取，slot,router路由功能。分享給大家供大家參考，具體如下：

一、vue默認(rèn)情況下，子組件也沒(méi)法訪問(wèn)父組件數(shù)據(jù)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
  <style>
  </style>
</head>
<body>
  <div id="box">
    <aaa>
    </aaa>
  </div>
  <script>
    var vm=new Vue({
      el:'#box',
      data:{
        a:'aaa'
      },
      components:{
        'aaa':{
          data(){
            return {
              msg:'我是父組件的數(shù)據(jù)'
            }
          },
          template:'<h2>我是aaa組件</h2><bbb></bbb>',
          components:{
            'bbb':{
              template:'<h3>我是bbb組件->{{msg}}</h3>'//這里是子組件，是訪問(wèn)不到父組件的數(shù)據(jù)msg
            }
          }
        }
      }
    });
  </script>
</body>
</html>

二、數(shù)據(jù)傳遞

組件數(shù)據(jù)傳遞:    √

1. 子組件獲取父組件data

在調(diào)用子組件：

<bbb :m="數(shù)據(jù)"></bbb>

子組件之內(nèi):

props:['m','myMsg']
props:{
  'm':String,
  'myMsg':Number
}

2. 父級(jí)獲取子級(jí)數(shù)據(jù)

*子組件把自己的數(shù)據(jù)，發(fā)送到父級(jí)
vm.$emit(事件名,數(shù)據(jù));
v-on:    @

1、子組件獲取父組件data

方法一：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
  <style>
  </style>
</head>
<body>
  <div id="box">
    <aaa></aaa>
  </div>
  <template id="aaa">
    <h1>11111</h1>
    <bbb :mmm="msg2" :my-msg="msg"></bbb>
  </template>
  <script>
    var vm=new Vue({
      el:'#box',
      data:{
        a:'aaa'
      },
      components:{
        'aaa':{
          data(){
            return {
              msg:111,
              msg2:'我是父組件的數(shù)據(jù)'
            }
          },
          template:'#aaa',
          components:{
            'bbb':{
              props:['mmm','myMsg'],//my-msg在這里要變成駝峰命名法
              template:'<h3>我是bbb組件->{{mmm}} <br> {{myMsg}}</h3>'
            }
          }
        }
      }
    });
  </script>
</body>
</html>

方法二：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
  <style>
  </style>
</head>
<body>
  <div id="box">
    <aaa></aaa>
  </div>
  <template id="aaa">
    <h1>11111</h1>
    <bbb :mmm="msg2" :my-msg="msg"></bbb>
  </template>
  <script>
    var vm=new Vue({
      el:'#box',
      data:{
        a:'aaa'
      },
      components:{
        'aaa':{
          data(){
            return {
              msg:111,
              msg2:'我是父組件的數(shù)據(jù)'
            }
          },
          template:'#aaa',
          components:{
            'bbb':{
              props:{
                'm':String,//注明數(shù)據(jù)類型
                'myMsg':Number
              },
              template:'<h3>我是bbb組件->{{mmm}} <br> {{myMsg}}</h3>'
            }
          }
        }
      }
    });
  </script>
</body>
</html>

2、 父級(jí)獲取子級(jí)數(shù)據(jù)

方法一：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
  <style>
  </style>
</head>
<body>
  <div id="box">
    <aaa></aaa>
  </div>
  <template id="aaa">
    <span>我是父級(jí) -> {{msg}}</span>
    <bbb @child-msg="get"></bbb>
  </template>
  <template id="bbb">
    <h3>子組件-</h3>
    <input type="button" value="send" @click="send">
  </template>
  <script>
    var vm=new Vue({
      el:'#box',
      data:{
        a:'aaa'
      },
      components:{
        'aaa':{
          data(){
            return {
              msg:'我是父組件的數(shù)據(jù)'
            }
          },
          template:'#aaa',
          methods:{
            get(msg){
              // alert(msg);
              this.msg=msg;
            }
          },
          components:{
            'bbb':{
              data(){
                return {
                  a:'我是子組件的數(shù)據(jù)'
                }
              },
              template:'#bbb',
              methods:{
                send(){
                  this.$emit('child-msg',this.a);
                }
              }
            }
          }
        }
      }
    });
  </script>
</body>
</html>

注意：

  • vm.dispatch(事件名,數(shù)據(jù))子級(jí)向父級(jí)發(fā)送數(shù)據(jù)vm.dispatch(事件名,數(shù)據(jù))子級(jí)向父級(jí)發(fā)送數(shù)據(jù)vm.broadcast(事件名,數(shù)據(jù)) 父級(jí)向子級(jí)廣播數(shù)據(jù)
  • 配合: event:{}
  • 在vue2.0里面已經(jīng)，報(bào)廢了

slot:位置、槽口

作用: 占個(gè)位置，不覆蓋原先的內(nèi)容

類似ng里面 transclude （指令）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
  <style>
  </style>
</head>
<body>
  <div id="box">
    <aaa>
      <ul slot="ul-slot">
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
      </ul>
      <ol slot="ol-slot">
        <li>111</li>
        <li>222</li>
        <li>333</li>
      </ol>
    </aaa>
    <hr>
    <aaa>
    </aaa>
  </div>
  <template id="aaa">
    <h1>xxxx</h1>
    <slot name="ol-slot">這是默認(rèn)的情況</slot>
    <p>welcome vue</p>
    <slot name="ul-slot">這是默認(rèn)的情況2</slot>
  </template>
  <script>
    var vm=new Vue({
      el:'#box',
      data:{
        a:'aaa'
      },
      components:{
        'aaa':{
          template:'#aaa'
        }
      }
    });
  </script>
</body>
</html>

效果圖：

vue-> SPA應(yīng)用，單頁(yè)面應(yīng)用 vue-router路由

    vue-resouce    交互
    vue-router    路由
    路由：根據(jù)不同url地址，出現(xiàn)不同效果
    該課程配套用 0.7.13版本 vue-router
主頁(yè)    home
新聞頁(yè)    news

html:

  <a v-link="{path:'/home'}">主頁(yè)</a>  跳轉(zhuǎn)鏈接
  展示內(nèi)容:
  <router-view></router-view>

js:

  //1. 準(zhǔn)備一個(gè)根組件
  var App=Vue.extend();
  //2. Home News組件都準(zhǔn)備
  var Home=Vue.extend({
    template:'<h3>我是主頁(yè)</h3>'
  });
  var News=Vue.extend({
    template:'<h3>我是新聞</h3>'
  });
  //3. 準(zhǔn)備路由
  var router=new VueRouter();
  //4. 關(guān)聯(lián)
  router.map({
    'home':{
      component:Home
    },
    'news':{
      component:News
    }
  });
  //5. 啟動(dòng)路由
  router.start(App,'#box');

跳轉(zhuǎn):

  router.redirect({
    '/':'/home'
  });

下載vue-router:

vue-router路由:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
  <script src="bower_components/vue-router/dist/vue-router.js"></script>
  <style>
  </style>
</head>
<body>
  <div id="box">
    <ul>
      <li>
        <a v-link="{path:'/home'}">主頁(yè)</a>
      </li>
      <li>
        <a v-link="{path:'/news'}">新聞</a>
      </li>
    </ul>
    <div>
      <router-view></router-view>
    </div>  
  </div>
  <script>
    //1. 準(zhǔn)備一個(gè)根組件
    var App=Vue.extend();
    //2. Home News組件都準(zhǔn)備
    var Home=Vue.extend({
      template:'<h3>我是主頁(yè)</h3>'
    });
    var News=Vue.extend({
      template:'<h3>我是新聞</h3>'
    });
    //3. 準(zhǔn)備路由
    var router=new VueRouter();
    //4. 關(guān)聯(lián)
    router.map({
      'home':{
        component:Home
      },
      'news':{
        component:News
      }
    });
    //5. 啟動(dòng)路由
    router.start(App,'#box');
  </script>
</body>
</html>

跳轉(zhuǎn)：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
  <script src="bower_components/vue-router/dist/vue-router.js"></script>
  <style>
  </style>
</head>
<body>
  <div id="box">
    <ul>
      <li>
        <a v-link="{path:'/home'}">主頁(yè)</a>
      </li>
      <li>
        <a v-link="{path:'/news'}">新聞</a>
      </li>
    </ul>
    <div>
      <router-view></router-view>
    </div>  
  </div>
  <script>
    //1. 準(zhǔn)備一個(gè)根組件
    var App=Vue.extend();
    //2. Home News組件都準(zhǔn)備
    var Home=Vue.extend({
      template:'<h3>我是主頁(yè)</h3>'
    });
    var News=Vue.extend({
      template:'<h3>我是新聞</h3>'
    });
    //3. 準(zhǔn)備路由
    var router=new VueRouter();
    //4. 關(guān)聯(lián)
    router.map({
      'home':{
        component:Home
      },
      'news':{
        component:News
      }
    });
    //5. 啟動(dòng)路由
    router.start(App,'#box');
    //6. 跳轉(zhuǎn)
    router.redirect({
      '/':'home' //訪問(wèn)根目錄時(shí)，跳轉(zhuǎn)到/home
    });
  </script>
</body>
</html>

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。

相關(guān)文章

  • Vue使用swiper問(wèn)題(5.2.0版本,避免踩坑)

    Vue使用swiper問(wèn)題(5.2.0版本,避免踩坑)

    這篇文章主要介紹了Vue使用swiper問(wèn)題(5.2.0版本,避免踩坑)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2023-04-04
  • Vue中使用vue2-perfect-scrollbar制作滾動(dòng)條

    Vue中使用vue2-perfect-scrollbar制作滾動(dòng)條

    這篇文章主要介紹了Vue中使用vue2-perfect-scrollbar滾動(dòng)條,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2022-06-06
  • Vue手寫(xiě)防抖和節(jié)流函數(shù)代碼詳解

    Vue手寫(xiě)防抖和節(jié)流函數(shù)代碼詳解

    在Vue中函數(shù)的防抖和節(jié)流不是什么新鮮話題,這篇文章主要給大家介紹了關(guān)于Vue3中防抖/節(jié)流的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-02-02
  • Vue使用vant實(shí)現(xiàn)日期選擇器功能

    Vue使用vant實(shí)現(xiàn)日期選擇器功能

    在當(dāng)今前端開(kāi)發(fā)的領(lǐng)域中,Vue 框架因其高效和靈活的特性備受開(kāi)發(fā)者青睞,而 Vant 是一個(gè)輕量的移動(dòng)端組件庫(kù),為 Vue 應(yīng)用的開(kāi)發(fā)提供了豐富且便捷的功能組件,本文將就如何在 Vue 框架中通過(guò) Vant 來(lái)實(shí)現(xiàn)日期選擇器的使用,需要的朋友可以參考下
    2024-08-08
  • vue ref如何獲取子組件屬性值

    vue ref如何獲取子組件屬性值

    這篇文章主要介紹了vue ref如何獲取子組件屬性值。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2022-03-03
  • 詳細(xì)聊聊Vue中的MVVM模式原理

    詳細(xì)聊聊Vue中的MVVM模式原理

    MVVM旨在利用WPF中的數(shù)據(jù)綁定函數(shù),通過(guò)從視圖層中幾乎刪除所有GUI代碼（代碼隱藏）,更好地促進(jìn)視圖層開(kāi)發(fā)與模式其余部分的分離,這篇文章主要給大家介紹了關(guān)于Vue.js中MVVM的相關(guān)資料,需要的朋友可以參考下
    2023-03-03
  • 解決vue做詳情頁(yè)跳轉(zhuǎn)的時(shí)候使用created方法 數(shù)據(jù)不會(huì)更新問(wèn)題

    解決vue做詳情頁(yè)跳轉(zhuǎn)的時(shí)候使用created方法 數(shù)據(jù)不會(huì)更新問(wèn)題

    這篇文章主要介紹了解決vue做詳情頁(yè)跳轉(zhuǎn)的時(shí)候使用created方法 數(shù)據(jù)不會(huì)更新問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-07-07
  • vue實(shí)現(xiàn)導(dǎo)入json解析成動(dòng)態(tài)el-table樹(shù)表格

    vue實(shí)現(xiàn)導(dǎo)入json解析成動(dòng)態(tài)el-table樹(shù)表格

    本文主要介紹了vue實(shí)現(xiàn)導(dǎo)入json解析成動(dòng)態(tài)el-table樹(shù)表格，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2023-02-02
  • 詳解一次Vue低版本安卓白屏問(wèn)題的解決過(guò)程

    詳解一次Vue低版本安卓白屏問(wèn)題的解決過(guò)程

    這篇文章主要介紹了詳解一次Vue低版本安卓白屏問(wèn)題的解決過(guò)程,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2019-05-05
  • vue轉(zhuǎn)react useEffect的全過(guò)程

    vue轉(zhuǎn)react useEffect的全過(guò)程

    這篇文章主要介紹了vue轉(zhuǎn)react useEffect的全過(guò)程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2022-09-09

最新評(píng)論