亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 145
粉絲 7
評(píng)論 7
訪問量 198800
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
Vue組件：父子組件間數(shù)據(jù)的傳遞
李東亞1??3????12?
原創(chuàng)
1155人瀏覽過

父級(jí)數(shù)據(jù)傳遞給子級(jí)：

1.父級(jí)組件通過v-bind把數(shù)據(jù)綁定到子組件的標(biāo)簽屬性中。
2.自己組件通過實(shí)列props屬性來接收父級(jí)傳過來的數(shù)據(jù)即可
3.代碼

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>組件間數(shù)據(jù)的傳遞</title>
  8.     <script src="vue.js" type="text/javascript" charset="utf-8"></script>
  9. </head>
  10. <body>
  11.     <div class="app">
  12.         <label for="num1">第一個(gè)數(shù)據(jù)：</label><input type="text" id="num1" v-model.number="num1">
  13.         <label for="num2">第二個(gè)數(shù)據(jù)：</label><input type="text" id="num2" v-model.number="num2">
  14.         <sum :sum="sum"></sum>
  15.     </div>
  16. </body>
  17. <script>
  18.     const vm=new Vue({
  19.         el:".app",
  20.         data:{
  21.             num1:1,
  22.             num2:2,
  23.         },
  24.         computed:{
  25.             sum(){
  26.                 return this.num1+this.num2;
  27.             }
  28.         },
  29.         components:{
  30.             sum:{
  31.                 props:["sum"],
  32.                 template:`<h4>{{sum}}</h4>`,
  33.             }
  34.         }
  35.     })
  36. </script>
  37. </html>

4.演示結(jié)果

子組件數(shù)據(jù)傳遞給父級(jí)組件

1.子組件的掛載點(diǎn)：html內(nèi)容必須有一個(gè)標(biāo)簽包裹
2.子組件傳數(shù)據(jù)

  • 主要通過子組件的$emit(“event”，參數(shù))觸發(fā)器
  • 觸發(fā)器來傳遞至調(diào)用子組件時(shí)綁定在自定義事件@event的父級(jí)函數(shù)來傳遞給父級(jí)數(shù)據(jù)
    3.代碼
    1. <!DOCTYPE html>
    2. <html lang="zh">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7.   <title>組件間數(shù)據(jù)的傳遞</title>
    8.   <script src="vue.js" type="text/javascript" charset="utf-8"></script>
    9. </head>
    10. <body>
    11.   <div class="app">
    12.       <span-sum @get="getsum"></span-sum>
    13.       <h1>{{sum}}</h1>
    14.   </div>
    15.   <template id="son">
    16.       <div>
    17.           <label for="num1">第一個(gè)數(shù)據(jù)：</label><input type="text" id="num1" v-model.number="num1">
    18.           <label for="num2">第二個(gè)數(shù)據(jù)：</label><input type="text" id="num2" v-model.number="num2">
    19.           <button type="button" @click="getsum()">計(jì)算</button>
    20.           <span>{{sum}}</span>
    21.       </div>
    22.   </template>
    23. </body>
    24. <script>
    25.   // 子組件
    26.   const spanSum={
    27.           data(){
    28.               return {
    29.                   num1:1,
    30.                   num2:2,
    31.                   sum:3,
    32.               }
    33.           },
    34.           template:"#son",
    35.           methods:{
    36.               getsum(){
    37.                   this.sum=this.num1 + this.num2;
    38.                   this.$emit('get',this.sum);
    39.               }
    40.           }
    41.   }
    42.   // 父組件
    43.   const vm=new Vue({
    44.       el:".app",
    45.       data:{
    46.           sum:"答案",
    47.       },
    48.       components:{
    49.           spanSum,
    50.       },
    51.       methods:{
    52.               getsum(sum){
    53.                   console.log(sum);    
    54.                   this.sum=sum;
    55.               }
    56.           }
    57.   })
    58. </script>
    59. </html>
    4、演示結(jié)果

組件的基礎(chǔ)知識(shí)：

1.組件實(shí)際上就是一個(gè)Vue實(shí)例，只不過時(shí)通過自定義標(biāo)簽名隱式掛載的
2.創(chuàng)建組件關(guān)鍵字：Vue.extend（{}）
3.注冊(cè)全局組件：Vue.component(“自定義標(biāo)簽名”,組件)
4.組件的數(shù)據(jù)data,必須是一個(gè)函數(shù)的return返回值
5.組件可以重復(fù)利用，且是一個(gè)封閉的對(duì)象（避免污染全局）
6.一般不建議創(chuàng)建全局組件
7.全局組件，可以載任何vue實(shí)例模板中直接使用
8.代碼

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>組件的組成和分類</title>
  8.     <script src="vue.js" type="text/javascript" charset="utf-8"></script>
  9. </head>
  10. <body>
  11.     <div class="app">
  12.         {{leave}}
  13.         <child-div></child-div>
  14.         <child-div></child-div>
  15.     <!--     <child></child>
  16.         <child></child>
  17.         <child></child> -->
  18.     </div>
  19.     <template id="child">
  21.         <span>子組件</span>
  22.     </template>
  23. </body>
  24. <script type="text/javascript">
  25.     // 創(chuàng)建組件
  26.     const child=Vue.extend(
  27.         {
  28.             template:"#child",
  29.         }
  30.     );
  31.     // 注冊(cè)全局組件
  32.     Vue.component("childDiv",child);
  35.     const vm=new Vue({
  36.         el:".app",
  37.         data(){
  38.             return {
  39.                 site:"種業(yè)圈",
  40.                 leave:"父級(jí)組件",
  41.             }
  42.         },
  43.         // 局部組件
  44.         components:{
  45.             // child,
  46.         }
  47.     })
  48. </script>
  49. </html

9.運(yùn)行結(jié)果

批改老師：天蓬老師天蓬老師

批改狀態(tài)：合格

老師批語(yǔ)：
本博文版權(quán)歸博主所有，轉(zhuǎn)載請(qǐng)注明地址！如有侵權(quán)、違法，請(qǐng)聯(lián)系admin@php.cn舉報(bào)處理！
全部評(píng)論 文明上網(wǎng)理性發(fā)言，請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議
0條評(píng)論
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長(zhǎng)！
關(guān)注服務(wù)號(hào) 技術(shù)交流群
PHP中文網(wǎng)訂閱號(hào)
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號(hào)
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)