Vue 父子组件进行通信

1. 通过template 标签创建相应的组件

<template id="cpn">
        <div>
            <h2>{{cmovies}}</h2>
            <p>{{cmessage}}</p>
        </div>
</template>

2. 将创建的组件进行相应的注册

<script src="./js/vue.js"></script>
        <script>
            const cpn = {
                template: '#cpn',
                props: ['cmovies', 'cmessage'],
                data() {
                    return {}
                },
                    
                methods: {
                    
                }
            }
            
            const app = new Vue({
                el: "#app",
                data: {
                    message: "你好啊",
                    cmovies: ["海王", "海贼王", "海尔兄弟"],
                    cmessage: "wode"
                },
                components: {
                    cpn
                }
                
            })
        </script>
    </body>

3. 通过props 进行限制传递给子组件的数据类型

props: {
    cmovies: Array,
        cmessage: {
              type: String, // 限制数据类型
              default: 'aaaaaa' // 给默认值，如果没有
        }
}

4. 可以限制的类型

props: 限制的数据类型

• type: 类型限制
• default: 默认类型
• required: true 要求是否必须传

5. 注意

类型对象是数组时候，默认值必须是一个函数

cmovies: {
    type: Array,
    default() {
        return []
    }
}

props 内部变量不支持驼峰命名