08-组件通信-父组件向子组件传递数据-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46498227/article/details/116767322

08-组件通信-父组件向子组件传递数据

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>组建通信-父组件向子组件传递数据</title>
</head>

<body>
    <div id="app">
        <cpn v-bind:cmovies="movies" :cmessage="message"></cpn>
    </div>

    <template id="cpn">
        <div>
            <ul>
                <li v-for="item in cmovies">{{item}}</li>
            </ul>
            <h2>{{cmessage}}</h2>
        </div>
    </template>

    <script src="../js/vue.js"></script>
    <script>
        // 父传子：props
        const cpn = {
            template: '#cpn',
            // props: ['cmovies', 'cmessage'],
            props:{
                // 1,类型限制
                // cmovies:Array,
                // cmessage:String
                // 2,提供一些默认值以及必传值
                cmessage:{
                    type:String,
                    default:'aaaaa',
                    required:true
                },
                // 类型是对象或者数组时，默认值必须是一个函数
                cmovies:{
                    type:Array,
                    default(){
                        return []
                    }
                }
            },
            data() {
                return {}
            }
        }


        const app = new Vue({
            el: '#app',
            data: {
                message: "你好啊",
                movies: ['海王', '海贼王', '少年']
            },
            components: {
                cpn
            //    'cpn':{
            //        template:'#cpn',
            //        props:['cmovies','cmessage'],
            //        data(){
            //            return {}
            //        }
            //    }
            }
        })
    </script>

</body>


</html>