在开发中,往往一些数据确实需要从上层传递到下层:
- 比如在一个页面中,我们从服务器请求到了很多的数据。
- 其中一部分数据,并非是我们整个页面的大组件来展示的,而是需要下面的子组件进行展示。
- 这个时候,并不会让子组件再次发送一个网络请求,而是直接让大组件(父组件)将数据传递给小组件(子组件)。
Vue官方提到如何进行父子组件间的通信:
- 通过props向子组件传递数据
- 通过事件向父组件发送消息
一、props的基本用法
在组件中,使用选项props来声明需要从父级接收到的数据。props的值有两种方式:
- 方式一: 字符串数组,数组中的字符串就是传递时的名称。
- 方式二: 对象,对象可以设置传递时的类型,也可以设置默认值等。
<div id="app"> <cpn v-bind:cmovies="movies" :cmessage="message"></cpn> </div> <template id="cpn"> <div> <p v-for="item in cmovies">{{item}}</p> <p> {{cmessage}}</p> </div> </template> <script> //父传子 const cpn = { template: "#cpn", //props: ["cmovies","cmessage"], props: { // //1. 类型的限制 // cmovies: Array, // cmessage: String // //2. 提供一些默认值,以及必传值 cmessage: { Type: String, //当没有进行父级传值时会使用默认值 default: "aaaaaa", // required 必须传的值 required:true }, cmovies: { Type: Array, //类型是对象或者数组时,默认值必须是一个函数 default(){ return [] } } }, data(){ return {}}, methods: {} } const app = new Vue({ el: "#app", data: { message: "Hellow World", movies: ["泰坦尼克号","海泽王","海尔兄弟"] }, components: { cpn } }); </script>
- 注意:在创建模板时,需要将 <template></template> 中写入一个容器,例如<div>标签;
- 在使用驼峰标识时,在模板标签引用中需要使用 “-” 符号将大写字母区隔开,在<template>模板标签中使用组件自定义驼峰标识名称(如下图所示 :c-info 和 :c-message)
<div id="app"> <cpn :c-info="info" :c-message="message"></cpn> </div> <template id="cpn"> <div> <h2>{{ cInfo }}</h2> <h2>{{ cMessage }}</h2> </div> </template> <script> const cpn = { template : "#cpn", props: { cInfo: { Type: Object, default(){ return {}} }, cMessage: { Type: String, default(){ return ""} } } } const app = new Vue({ el: "#app", data: { message: "Hellow World", info: { name: "why", age: 18, height: 1.88 } }, components: { cpn } }); </script>