Vue组件通信

父传子------props

在组件中，使用选项props来声明需要从父级接收到的数据。

(一) props的值有两种方式:

1.方式一︰字符串数组，数组中的字符串就是传递时的名称。

2.方式二∶对象，对象可以设置传递时的类型，也可以设置默认值等

(二) 用props传值方法:

（1）组件模块的分离

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

（2）父组件传值

const app = new Vue({
        el: '#app',
        data: {
            message: 'hello world',
            movies: ['海王', '海贼王', '泰尔兄弟']
        },
        //局部注册组件
        components: {
            "cpn":cpn 
        }
    })

（3）传参

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

（4）子组件接收

const cpn = {
        template: '#cpn',
        props: ['cmovies', 'cmessage'],
    }

(三) props数据验证:

1.数组方法：

const cpn = {
     template: '#cpn',
     props: ['cmovies', 'cmessage'],
}

2.对象方法：

• 2.1、类型限制

const cpn = {
     template: '#cpn',
     props: {
           cmovies: Array,
           cmessage: String
       }
}

• 2.2、提供一些默认值及是否必须传值

const cpn = {
     template: '#cpn',
     props: {
            cmessage: {
                type: String,
                default: 'aaaaa' ,//默认值
                required:true  //必须传值
            }
       }
}

• 2.3、类型是对象或者数组时，默认值必须是一个函数

const cpn = {
     template: '#cpn',
     props: {
             cmovies: {
                type: Array,
                default(){
                    return ['a','b']
                }
            }
       }
}

• 2.4、自定义验证函数

    const cpn = {
        template: '#cpn',
        props: {
            cmovies: {
                validator(value) {
                    //这个值必须匹配下列字符串中的一个
                    return ['success', 'warning', 'danger'].indexof(value) !== -1
                }
            }
        }
    }

子传父------$emit()

(一) $emit()传值方式:

在子组件中用$emit()来触发事件

在父组件中通过v-on来监听子组件事件

(二) 用$emit()传值方法:

（1）子组件模块

<template id="cdn">
        <div>
            <button v-for="item in categories" @click="btnclick(item)">{{item.name}}</button>
        </div>
    </template>

（2）父组件模块

<div id="app">
        <!-- 监听事件 -->
        <cdn v-on:itemclick="reverse"></cdn>
    </div>

（3）子组件传值

 const cdn = {
        template: "#cdn",
        data() {
            return {
                categories: [{
                        id: 'a',
                        name: '热门推荐'
                    },
                    {
                        id: 'b',
                        name: '手机数码'
                    },
                    {
                        id: 'c',
                        name: '家用家电'
                    },
                    {
                        id: 'd',
                        name: '电脑办公'
                    }
                ]
            }
        },
        methods: {
            btnclick(item) {
                //发射事件 itemclick:自定义事件
                this.$emit("itemclick", item)
            }
        },
    }

（4）父组件接收

 const app = new Vue({
        el: '#app',
        data: {

        },
        components: {
            "cdn": cdn
        },
        methods: {
            reverse(item) {
                console.log("reverse", item)
            }
        }
    })

下次见啦~~ 拜拜