欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Vue自学：父子组件通信-父传子props

程序员文章站 2022-03-06 12:24:08
...
    

  1. `<!DOCTYPE html>
    2. 

  2. <html lang="zh">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. 

  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7. 

  7.     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
    8. 

  8.     <title>Vue自学：父子组件通信-父传子props</title>
    9. 

  9. </head>
    10. 

  10. <body>
    11. 

  11.     <div id="app">
    12. 

  12.         <!-- 分配通信过来的数值给到cpn子组件，分配方式为绑定虚拟属性 v-bind:arr="arr" -->
    13. 

  13.         <cpn v-bind:arr="arr"></cpn>
    14. 

  14.     </div>
    15. 

  15. </body>
    16. 

    17. 

  17. <template id="cpn">
    18. 

  18.     <div>
    19. 

  19.         <ul>
    20. 

  20.             <!-- 成功的分配到了数值，通过分配过来的数值遍历 -->
    21. 

  21.             <li v-for="item in arr">{{item}}</li>
    22. 

  22.         </ul>
    23. 

  23.     </div>
    24. 

  24. </template>
    25. 

    26. 

  26. <script type="text/javascript">
    27. 

  27.     //在上一节中，我们提到了子组件是不能引用父组件或者Vue实例的数据的
    28. 

  28.     //但是，在开发中，往往一些数据确实需要从上层传递到下层
    29. 

  29.     //比如在一个页面当中，我们从服务器请求到了很多数据
    30. 

  30.     //其中一部分数据，并非是我们整个页面的大组件来展示的，而是需要下面的子组件进行展示
    31. 

  31.     //这个时候，并不会让子组件再次发送一个网络请求，而是直接让大组件（父组件）传递数据给小组件（子组件）
    32. 

    33. 

  33.     //如何进行父组件间的数据传递呢？Vue官方提到
    34. 

  34.     //通过props向子组件传递数据
    35. 

  35.     //通过事件向父组件传递信息
    36. 

    37. 

  37.     //1.创建局部组件
    38. 

  38.     const cpn = {
    39. 

  39.         // 设置绑定的模板
    40. 

  40.         template:'#cpn',
    41. 

  41.         data(){
    42. 

    43. 

  43.         },
    44. 

  44.         methods:{
    45. 

    46. 

  46.         },
    47. 

  47.         //props:父组件传递到子组件的通信
    48. 

  48.         props:{
    49. 

  49.             //默认值写法（最为完善的写法）
    50. 

  50.             //传递过来的是父组件中的arr属性
    51. 

  51.             //推荐使用使用对象写法
    52. 

  52.             arr:{
    53. 

  53.                 type:Array,
    54. 

  54.                 //当默认值为空数组时，正确的是些是使用函数返回默认值
    55. 

  55.                 default(){
    56. 

  56.                     return []
    57. 

  57.                 },
    58. 

  58.                 required:true,
    59. 

  59.             },
    60. 

  60.         },
    61. 

  61.         //使用对象写法的同时，也可以使用数组写法 ['arr'],但无法进行数据验证，因而不推荐
    62. 

  62.         //使用对象写法，可以进行数据类型校验，验证支持如下类型：
    63. 

  63.         //String
    64. 

  64.         //Number
    65. 

  65.         //Boolean
    66. 

  66.         //Array
    67. 

  67.         //Object
    68. 

  68.         //Date
    69. 

  69.         //Function
    70. 

  70.         //Symbol
    71. 

  71.     }
    72. 

  72.     //2.创建父组件
    73. 

    74. 

  74.     const app = new Vue({
    75. 

  75.         el:'#app',
    76. 

  76.         data:{
    77. 

  77.             arr:['苹果','香蕉','雪梨','蔬菜'],
    78. 

  78.         },
    79. 

  79.         methods:{
    80. 

    81. 

  81.         },
    82. 

  82.         components:{
    83. 

  83.             'cpn':cpn
    84. 

  84.         },
    85. 

  85.     })
    86. 

    87. 

  87.     //使用对象的方式对类型进行返回或验证
    88. 

  88.     // Vue.component('my-component',{
    89. 

  89.     //     props:{
    90. 

  90.     //         //基础的类型检查('null，匹配任何类型'),匹配单个
    91. 

  91.     //         propA:Number,
    92. 

  92.     //         //匹配多个可能的类型，重叠
    93. 

  93.     //         propB:[string,Number],
    94. 

  94.     //         //必须的字符串
    95. 

  95.     //         propC:{
    96. 

  96.     //             type:String,
    97. 

  97.     //             required:true,
    98. 

  98.     //         },
    99. 

  99.     //         //带有默认值为数字的
    100. 

  100.     //         propD:{
    101. 

  101.     //             type:Number,
    102. 

  102.     //             default:100,
    103. 

  103.     //         }
    104. 

  104.     //         //带有默认值的对象
    105. 

  105.     //         propE:{
    106. 

  106.     //             type:Object,
    107. 

  107.     //             //对象或数组，一定以函数方式返回
    108. 

  108.     //             default(){
    109. 

  109.     //                 return {
    110. 

  110.     //                     name:'梁凯达'
    111. 

  111.     //                 }
    112. 

  112.     //             }
    113. 

  113.     //         },
    114. 

  114.     //         //自定义验证函数
    115. 

  115.     //         propF:{
    116. 

  116.     //             validator:function(){
    117. 

  117.     //                 //这个值必须匹配下列字符串中的某一个
    118. 

  118.     //                 return ['success','warning','danger'].indexOf(value) !== -1
    119. 

  119.     //             }
    120. 

  120.     //         }
    121. 

    122. 

  122.     //     }
    123. 

  123.     // })
    124. 

  124. </script>
    125. 

  125. </html>`
    126.

上一篇： css怎样清除左右浮动

下一篇： JS-动态获取数据

推荐阅读