父子组件之间的通信

首先，组件需要向服务器请求数据，服务器将数据传递给外层最大的父级组件，因此父级组件需要将得到的值传递给下面的小组件，因此引入了父子间通信

子组件不能引用父组件或者Vue实例的数据的；在开发中，往往需要将一些数据从上层传递给下层；

进行父子组件之间信息传递（互传）的方式：1通过props向子组件传递信息2通过事件向父组件发送消息；

父组件--（pass props）----》子组件 -------（$emit Events）------》父组件

props 基本语法：

父组件--（pass props）----》子组件

使用选项props来声明需要从父级接收的数据。

props的值有两种方式：

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<div id="app">
<!--    只有使用了v-bind才会识别为变量-->
    <cpn :cmovies="movies" ></cpn><!--能够显示默认值，因为下面设置了默认值且没有进行传参数-->
    <cpn :cmovies="movies" :cmessage="message"></cpn><!--对比，已经设置了参数，则会显示已经传过来的参数-->

</div>
<body>


<template id="cpn"><!--注意：组件模本只能包含有个根目录-->
    <div>
        <ul>
            <li v-for="item in cmovies">{{item}}</li>
        </ul>
        {{cmessage}}
    </div>
</template>
<script src="vue.js"></script>
<script>
/*父传子使用props*/
/*希望将父组件中的数据传递给子组件,然后让子组件进行展示*/

    const cpn={
        template:'#cpn',
        data(){
            return{}
        },
        methods:{},
        // props:["cmovies","cmessage"]

        props:{
            //定义成对象时，是可以对他进行类型的限制
            // cmovies:Array,
            // cmessage:String,
        //    2提供一些默认值以及必须传递的值
            cmovies:{
                type:Array,
                default(){     /*如果是数组的话，默认值必须设置成为一个工厂函数，进行返回 */
                    return []
                }
            },
            cmessage:{
                type: String,
                default:"assasas",     /*设置默认值*/
                // required:true     /*该属性是必须传递的值*/
            }

        }
        };


    const app=new Vue({         /*看成root父组件*/
        el:'#app',
        data:{
            message:'你好啊',
            movies:["海王","海贼王","海尔"]  /*父组件的数据*/
        },
        components:{
            cpn   /*增强写法中的自变量属性增强写法*/
        }
    })
</script>
</body>
</html>

父子组件之间的通信

猜你喜欢