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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <!-- 主模板 -->
        <div id="app">
                        <!-- 注意：v-bind不支持驼峰法命名，需改成如下写法 -->
            <cpv :child-movies="movies" :childmsg="msg"></cpv>
        </div>
        
        <!-- 子组件模板 -->
        <template id="child-template">
            <div>
                <ul>
                    <li v-for="item in childMovies">{{item}}</li>
                </ul>
                <p>{{childmsg}}</p>
            </div>
        </template>
        
        <script src="js/vue.js"></script>
        <script type="text/javascript">
            
            // 父传子数据 props，子组件
            const cpv = {
                template : '#child-template',
                props: {
                    childMovies: {
                        type: Array, // 数据类型
                        default() {    // 默认值
                            return [];
                        }
                    },
                    
                    childmsg: {
                        type: String,
                        default: ''
                    }
                }
            };
            
            // 父
            const vm = new Vue({
                el:"#app",
                data:{
                    movies:["海贼王", "火影忍者", "进击的巨人"],
                    msg: "啦啦啦啦啦啦啦啦啦"
                },
                components:{
                    cpv
                }
            });
            
        </script>
    </body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。