[JavaScript知识库]Vue中父子组件之间的通信（传递数据）以及父子组件的相互访问

一、父组件向子组件传递

父组件向子组件传递数据，可以通过props属性来实现：
1.1 第一种写法：使用数组类型

    <script src="../JS/vue.js"></script>
    <script>
       

        const app = new Vue({
            el: '#app',
            //父组件中要传递的数据：
            data: {
                message: 'Ocean',
                movies:['海贼王','fate','vivy']
            },
            components:{
                cpn:{
                    template:'#cpn',
                    // 父传子 通过props 方式一: 数组 
                    props:['cmovies','cmessage']
                }
            }
    })
    </script>

    <div id="app">
    //切记不要忘记，在使用这个子组件的时候，将要传递过来的数据动态的绑定在自定义属性上
        <cpn :cmovies="movies" :cmessage="message"></cpn>
    </div>

<!-- 子组件模板 -->
    <template id="cpn">
        <div>
        //在这里使用了从父组件传递过来的数据
           <ul>
               <li v-for="item in cmovies">{{item}}</li>
           </ul>
            <p>{{cmessage}}</p>
        </div>
    </template>

1.2 第二种写法：使用对象类型（这种方法可以对数据进行类型的限制）

    <script>
       

        const app = new Vue({
            el: '#app',
            data: {
                message: 'Ocean',
                movies:['海贼王','fate','vivy']
            },
            components:{
                cpn:{
                    template:'#cpn',
                    props:{
                        //1.这种写法 可以进行 数据类型限制
                        cmovies:Array,
                        cmessage:String
                    }
                }
            }
    })
    </script>

1.3 第三种写法 可以添加默认值
当没有传入对应的值的时候会使用默认值

    <script>
       

        const app = new Vue({
            el: '#app',
            data: {
                message: 'Ocean',
                movies:['海贼王','fate','vivy']
            },
            components:{
                cpn:{
                    template:'#cpn',
                    props:{
                        cmovies:{
                            //可以提供一些 默认值(没有传递时 会使用默认值)
                            type:Array,
                            default:'aaaaa',
                            // 表示等使用此组件的时候必须传入此值
                            required:true
                        },
                        cmessage:{
                            type:String,
                            default:[]
                        }
                    }
                }
            }
    })
    </script>

二、子组件向父组件传递

我们可以通过自定义事件，来达到子组件向父组件通信的目的
代码如下：

    <div id="app">
    	//为子组件绑定自定义的事件
        <cpn @itemclick="cpnClick"></cpn>
    </div>
    
    <!-- 子组件模板 -->
    <template id="cpn">
        <div>
            <button v-for="item in categories"
                @click="btnClick(item)"
            >{{item.name}}</button>
        </div>
    </template>
    <script src="../JS/vue.js"></script>
    <script>


        const app = new Vue({
            el: '#app',
            data: {
                message: 'Ocean'
            },
            components:{
                cpn:{
                    template:'#cpn',
                    data(){
                        return {
                            categories:[
                                {
                                    id:'aaa',
                                    name:'热门推荐'
                                },
                                {
                                    id:'bbb',
                                    name:'手机数码'
                                },
                                {
                                    id:'ccc',
                                    name:'生活用品'
                                },
                                {
                                    id:'ddd',
                                    name:'食品零食'
                                }
                            ]
                        }
                    },
                    methods:{
                        btnClick(item){
                        //事件触发后，发送事件以及要传递的数据item
                            this.$emit('itemclick',item)
                        }
                    },
                }
            },
            methods:{
                cpnClick(item){
                    console.log(item);
                }
            }
            
    })
    </script>

三、父组件访问子组件

    <div id="app">
        <cpn></cpn>
        <cpn></cpn>
        <cpn ref="aaa"></cpn>
        <button @click="btnClick">按钮</button>
    </div>
   <template id="cpn">
        <div>
            <p>我是子组件</p>
        </div>
   </template> 

    <script src="../JS/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: 'Ocean'
            },
            components:{
                cpn:{
                    template:'#cpn',
                    methods:{
                        showMessage(){
                            console.log('showMessage');
                        }
                    },
                    data(){
                        return {
                            name: '我是子组件的name'
                        }
                    }
                }
            },
            methods:{
                btnClick(){
                    // 1. 通过$children
                    console.log(this.$children);
                    this.$children[0].showMessage();
                    console.log(this.$children[0].name);
                    // 2. 使用 $refs 默认是一个空对象 需要在组件上加上属性 res
                     console.log(this.$refs.aaa.name);
                }
            }
    })
    </script>

注意：使用 $refs 默认是一个空对象 需要在组件上加上属性 res，来告诉vue需要访问的哪一个子组件

四、子组件访问父组件

可以通过 $parent 来访问父组件中的数据；也可以通过 $root来直接访问根组件

    <div id="app">
        <h2>我是cpn组件</h2>
        <cpn></cpn>
    </div>
   <template id="cpn">
        <div>
            <ccpn></ccpn>
        </div>
   </template> 

   <template id="ccpn">
    <div>
        <h2>我是cpn的子组件</h2>
        <button @click="btnClick">按钮</button>
    </div>
   </template>

    <script src="../JS/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: 'Ocean'
            },
            components:{
                cpn:{
                    template:'#cpn',
                    components:{
                        ccpn:{
                            template:'#ccpn',
                            methods:{
                                btnClick(){
                                    // 通过 $parent 访问父组件
                                    console.log(this.$parent);
                                    console.log(this.$parent.name);
                                    // 也可以直接访问 根组件$root
                                     console.log(this.$root.message);
                                }
                            },

                        }
                    },
                    data(){
                        return {
                            name: '我是cpn的name'
                        }
                    }
                },
                
            },
            
    })
    </script>