父子组件之间的通讯

时间 2019-11-29

标签父子组件之间通讯繁體版

原文原文链接

首先，组件须要向服务器请求数据，服务器将数据传递给外层最大的父级组件，所以父级组件须要将获得的值传递给下面的小组件，所以引入了父子间通讯html

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

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

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

props 基本语法：app

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

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

props的值有两种方式：component

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

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

<!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>