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

`<!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>`
相关文章
