[JavaScript知识库]如何在使用vue框架进行组件化开发中，解决父子通信数据传输问题-----父传子

<!--template中支持驼峰写法可以写回驼峰写法，而且当template中药在最外层加div为根框架  -->
<template id="cpn">
    <div>
        <ul>
            <li v-for="item in cmovies">{{item}}</li>
        </ul>
        <p>{{cmessage}}</p>
    </div>
</template>

<script>
    const cpn = {
        template: '#cpn',

        // // 第一种写法
        // // 父子通讯  父传子函数 props
        // props: ['cmovies', 'cmessage'],

        // // 第二种写法
        // // 类型限制，限制传输的默认类型 Array数组
        // props:{
        //     cmovies:Array,
        //     cmessage:String,
        // },

        // 第三种写法
        // type：限制接收的默认类型   default:当没有数据接收时默认值是  required 是要求必须传值如果不传值就会出现报错
        props: {
            cmessage: {
                type: String,
                default: 'aaaaa',
                required: true
            },
            cmovies: {
                type: Array,
                default: []
            }

        },

        data() {},

    }

    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊',
            movies: ['海王', '海贼王', '海尔兄弟']
        },
        components: {
            cpn
        }
    })
</script>