Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > Vue自学：父子组件通信-父传子props
Blogger Information
Blog 250
fans 3
comment 0
visits 323088
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Vue自学：父子组件通信-父传子props
梁凯达的博客
Original
1396 people have browsed it
  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自学：父子组件通信-父传子props</title>
  9. </head>
  10. <body>
  11.     <div id="app">
  12.         <!-- 分配通信过来的数值给到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.             <!-- 成功的分配到了数值，通过分配过来的数值遍历 -->
  21.             <li v-for="item in arr">{{item}}</li>
  22.         </ul>
  23.     </div>
  24. </template>
  26. <script type="text/javascript">
  27.     //在上一节中，我们提到了子组件是不能引用父组件或者Vue实例的数据的
  28.     //但是，在开发中，往往一些数据确实需要从上层传递到下层
  29.     //比如在一个页面当中，我们从服务器请求到了很多数据
  30.     //其中一部分数据，并非是我们整个页面的大组件来展示的，而是需要下面的子组件进行展示
  31.     //这个时候，并不会让子组件再次发送一个网络请求，而是直接让大组件（父组件）传递数据给小组件（子组件）
  33.     //如何进行父组件间的数据传递呢？Vue官方提到
  34.     //通过props向子组件传递数据
  35.     //通过事件向父组件传递信息
  37.     //1.创建局部组件
  38.     const cpn = {
  39.         // 设置绑定的模板
  40.         template:'#cpn',
  41.         data(){
  43.         },
  44.         methods:{
  46.         },
  47.         //props:父组件传递到子组件的通信
  48.         props:{
  49.             //默认值写法（最为完善的写法）
  50.             //传递过来的是父组件中的arr属性
  51.             //推荐使用使用对象写法
  52.             arr:{
  53.                 type:Array,
  54.                 //当默认值为空数组时，正确的是些是使用函数返回默认值
  55.                 default(){
  56.                     return []
  57.                 },
  58.                 required:true,
  59.             },
  60.         },
  61.         //使用对象写法的同时，也可以使用数组写法 ['arr'],但无法进行数据验证，因而不推荐
  62.         //使用对象写法，可以进行数据类型校验，验证支持如下类型：
  63.         //String
  64.         //Number
  65.         //Boolean
  66.         //Array
  67.         //Object
  68.         //Date
  69.         //Function
  70.         //Symbol
  71.     }
  72.     //2.创建父组件
  74.     const app = new Vue({
  75.         el:'#app',
  76.         data:{
  77.             arr:['苹果','香蕉','雪梨','蔬菜'],
  78.         },
  79.         methods:{
  81.         },
  82.         components:{
  83.             'cpn':cpn
  84.         },
  85.     })
  87.     //使用对象的方式对类型进行返回或验证
  88.     // Vue.component('my-component',{
  89.     //     props:{
  90.     //         //基础的类型检查('null，匹配任何类型'),匹配单个
  91.     //         propA:Number,
  92.     //         //匹配多个可能的类型，重叠
  93.     //         propB:[string,Number],
  94.     //         //必须的字符串
  95.     //         propC:{
  96.     //             type:String,
  97.     //             required:true,
  98.     //         },
  99.     //         //带有默认值为数字的
  100.     //         propD:{
  101.     //             type:Number,
  102.     //             default:100,
  103.     //         }
  104.     //         //带有默认值的对象
  105.     //         propE:{
  106.     //             type:Object,
  107.     //             //对象或数组，一定以函数方式返回
  108.     //             default(){
  109.     //                 return {
  110.     //                     name:'梁凯达'
  111.     //                 }
  112.     //             }
  113.     //         },
  114.     //         //自定义验证函数
  115.     //         propF:{
  116.     //             validator:function(){
  117.     //                 //这个值必须匹配下列字符串中的某一个
  118.     //                 return ['success','warning','danger'].indexOf(value) !== -1
  119.     //             }
  120.     //         }
  122.     //     }
  123.     // })
  124. </script>
  125. </html>`
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post