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

搜索
博主信息
博文 250
粉絲 3
評(píng)論 0
訪問(wèn)量 382161
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
Vue自學(xué)：父子組件通信-父?jìng)髯觩rops
梁凱達(dá)的博客
原創(chuàng)
1783人瀏覽過(guò)
  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.     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
  8.     <title>Vue自學(xué)：父子組件通信-父?jìng)髯觩rops</title>
  9. </head>
  10. <body>
  11.     <div id="app">
  12.         <!-- 分配通信過(guò)來(lái)的數(shù)值給到cpn子組件，分配方式為綁定虛擬屬性 v-bind:arr="arr" -->
  13.         <cpn v-bind:arr="arr"></cpn>
  14.     </div>
  15. </body>
  17. <template id="cpn">
  18.     <div>
  19.         <ul>
  20.             <!-- 成功的分配到了數(shù)值，通過(guò)分配過(guò)來(lái)的數(shù)值遍歷 -->
  21.             <li v-for="item in arr">{{item}}</li>
  22.         </ul>
  23.     </div>
  24. </template>
  26. <script type="text/javascript">
  27.     //在上一節(jié)中，我們提到了子組件是不能引用父組件或者Vue實(shí)例的數(shù)據(jù)的
  28.     //但是，在開發(fā)中，往往一些數(shù)據(jù)確實(shí)需要從上層傳遞到下層
  29.     //比如在一個(gè)頁(yè)面當(dāng)中，我們從服務(wù)器請(qǐng)求到了很多數(shù)據(jù)
  30.     //其中一部分?jǐn)?shù)據(jù)，并非是我們整個(gè)頁(yè)面的大組件來(lái)展示的，而是需要下面的子組件進(jìn)行展示
  31.     //這個(gè)時(shí)候，并不會(huì)讓子組件再次發(fā)送一個(gè)網(wǎng)絡(luò)請(qǐng)求，而是直接讓大組件（父組件）傳遞數(shù)據(jù)給小組件（子組件）
  33.     //如何進(jìn)行父組件間的數(shù)據(jù)傳遞呢？Vue官方提到
  34.     //通過(guò)props向子組件傳遞數(shù)據(jù)
  35.     //通過(guò)事件向父組件傳遞信息
  37.     //1.創(chuàng)建局部組件
  38.     const cpn = {
  39.         // 設(shè)置綁定的模板
  40.         template:'#cpn',
  41.         data(){
  43.         },
  44.         methods:{
  46.         },
  47.         //props:父組件傳遞到子組件的通信
  48.         props:{
  49.             //默認(rèn)值寫法（最為完善的寫法）
  50.             //傳遞過(guò)來(lái)的是父組件中的arr屬性
  51.             //推薦使用使用對(duì)象寫法
  52.             arr:{
  53.                 type:Array,
  54.                 //當(dāng)默認(rèn)值為空數(shù)組時(shí)，正確的是些是使用函數(shù)返回默認(rèn)值
  55.                 default(){
  56.                     return []
  57.                 },
  58.                 required:true,
  59.             },
  60.         },
  61.         //使用對(duì)象寫法的同時(shí)，也可以使用數(shù)組寫法 ['arr'],但無(wú)法進(jìn)行數(shù)據(jù)驗(yàn)證，因而不推薦
  62.         //使用對(duì)象寫法，可以進(jìn)行數(shù)據(jù)類型校驗(yàn)，驗(yàn)證支持如下類型：
  63.         //String
  64.         //Number
  65.         //Boolean
  66.         //Array
  67.         //Object
  68.         //Date
  69.         //Function
  70.         //Symbol
  71.     }
  72.     //2.創(chuàng)建父組件
  74.     const app = new Vue({
  75.         el:'#app',
  76.         data:{
  77.             arr:['蘋果','香蕉','雪梨','蔬菜'],
  78.         },
  79.         methods:{
  81.         },
  82.         components:{
  83.             'cpn':cpn
  84.         },
  85.     })
  87.     //使用對(duì)象的方式對(duì)類型進(jìn)行返回或驗(yàn)證
  88.     // Vue.component('my-component',{
  89.     //     props:{
  90.     //         //基礎(chǔ)的類型檢查('null，匹配任何類型'),匹配單個(gè)
  91.     //         propA:Number,
  92.     //         //匹配多個(gè)可能的類型，重疊
  93.     //         propB:[string,Number],
  94.     //         //必須的字符串
  95.     //         propC:{
  96.     //             type:String,
  97.     //             required:true,
  98.     //         },
  99.     //         //帶有默認(rèn)值為數(shù)字的
  100.     //         propD:{
  101.     //             type:Number,
  102.     //             default:100,
  103.     //         }
  104.     //         //帶有默認(rèn)值的對(duì)象
  105.     //         propE:{
  106.     //             type:Object,
  107.     //             //對(duì)象或數(shù)組，一定以函數(shù)方式返回
  108.     //             default(){
  109.     //                 return {
  110.     //                     name:'梁凱達(dá)'
  111.     //                 }
  112.     //             }
  113.     //         },
  114.     //         //自定義驗(yàn)證函數(shù)
  115.     //         propF:{
  116.     //             validator:function(){
  117.     //                 //這個(gè)值必須匹配下列字符串中的某一個(gè)
  118.     //                 return ['success','warning','danger'].indexOf(value) !== -1
  119.     //             }
  120.     //         }
  122.     //     }
  123.     // })
  124. </script>
  125. </html>`
本博文版權(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é)