Vue(基础四)_总结五种父子组件之间的通信方式

一、前言

这篇文章主要总结了几种通信方式：

1、方式一：使用props: [ ]和$emit() （适用于单层通信）

2、方式二：$attrs和$listeners（适用于多层）

3、方式三：中央处理事件：bus.$on监听触发的事件

4、方式四：provide:[]，inject:[']

5、方式五：通过给$parent $children赋值

二、主要内容

1、方式一：使用props: [ ]和$emit()

　　（1）父组件向子组件通信

　　a.步骤：①先给父组件添加自定义属性

　　　　 ②子组件用props:[]接收传来的自定义属性

　　　　 ③子组件就可使用接收到的数据

　　b.代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin:0;
            padding: 0;
        }

        .parent{
            height: 150px;
            width: 400px;
            background-color: blue;
        }

        .child{
            height: 100px;
            width: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id='app'>
        
    </div>
    <script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">

        Vue.component('Child',{

            data(){
                return{

                }
            },

            template:`<div class='child'>
            这是孩子组件
            <input :value='childData'/>


            </div>`,

            props:['childData']

        })


        var Parent = {
            data(){
                return{
                    msg:'这是父组件的数据'
                }
            },

            template:`<div class='parent'>
            这是父组件：
            <Child :childData='msg'></Child>
            </div>
            `
        }
        
        new Vue({
            el:"#app",
            data(){
                return{

                }
            },

            template:`<Parent></Parent>`,
            components:{
                Parent
            }
        })
    </script>
</body>
</html>

父组件向子组件传递数据.html