`<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script><title>Vue自学：父子组件通信-父传子props</title></head><body><div id="app"><!-- 分配通信过来的数值给到cpn子组件，分配方式为绑定虚拟属性 v-bind:arr="arr" --><cpn v-bind:arr="arr"></cpn></div></body><template id="cpn"><div><ul><!-- 成功的分配到了数值，通过分配过来的数值遍历 --><li v-for="item in arr">{{item}}</li></ul></div></template><script type="text/javascript">//在上一节中，我们提到了子组件是不能引用父组件或者Vue实例的数据的//但是，在开发中，往往一些数据确实需要从上层传递到下层//比如在一个页面当中，我们从服务器请求到了很多数据//其中一部分数据，并非是我们整个页面的大组件来展示的，而是需要下面的子组件进行展示//这个时候，并不会让子组件再次发送一个网络请求，而是直接让大组件（父组件）传递数据给小组件（子组件）//如何进行父组件间的数据传递呢？Vue官方提到//通过props向子组件传递数据//通过事件向父组件传递信息//1.创建局部组件const cpn = {// 设置绑定的模板template:'#cpn',data(){},methods:{},//props:父组件传递到子组件的通信props:{//默认值写法（最为完善的写法）//传递过来的是父组件中的arr属性//推荐使用使用对象写法arr:{type:Array,//当默认值为空数组时，正确的是些是使用函数返回默认值default(){return []},required:true,},},//使用对象写法的同时，也可以使用数组写法 ['arr'],但无法进行数据验证，因而不推荐//使用对象写法，可以进行数据类型校验，验证支持如下类型：//String//Number//Boolean//Array//Object//Date//Function//Symbol}//2.创建父组件const app = new Vue({el:'#app',data:{arr:['苹果','香蕉','雪梨','蔬菜'],},methods:{},components:{'cpn':cpn},})//使用对象的方式对类型进行返回或验证// Vue.component('my-component',{// props:{// //基础的类型检查('null，匹配任何类型'),匹配单个// propA:Number,// //匹配多个可能的类型，重叠// propB:[string,Number],// //必须的字符串// propC:{// type:String,// required:true,// },// //带有默认值为数字的// propD:{// type:Number,// default:100,// }// //带有默认值的对象// propE:{// type:Object,// //对象或数组，一定以函数方式返回// default(){// return {// name:'梁凯达'// }// }// },// //自定义验证函数// propF:{// validator:function(){// //这个值必须匹配下列字符串中的某一个// return ['success','warning','danger'].indexOf(value) !== -1// }// }// }// })</script></html>`
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
