父组件与子组件之间的通信（props和$emit）

#父组件与子组件之间的通信（props和$emit）| 来源: 网络整理| 查看: 265

简介：

1.父组件可以使用 props 把数据传给子组件。 2.子组件可以使用 $emit() 触发父组件的自定义事件。

开始学习

文件说明： html文件名字 vue2.html js文件名字 vue2.js css文件名字 vue2.css

先定义父子两个组件和一个 Vue 对象 var childNode = { template: `我是子组件` }; var parentNode = { template: ``, components: { child: childNode } }; new Vue({ el: '#example', components: { parent: parentNode } }); 效果1 静态 props 传递要让子组件使用父组件的数据，需要通过子组件的 props 选项。父组件向子组件传递数据分为两种方式：动态和静态，这里先学习静态方式。

例子：子组件显示用 props 获得的数据

说明（命名规范）：对于 props 声明的属性，在父组件的 template 模板中，属性名需要使用中划线写法；子组件 props 属性声明时，使用小驼峰{{}}或者中划线写法都可以；而子组件的模板使用从父组件传来的变量时，需要使用对应的小驼峰{{}}写法。 Vue 能够正确识别出小驼峰和下划线命名法混用的变量且不分大小写，如这里的post-msg和postMsg是同一值小驼峰写法是需要把中横线后面的第一个字母大写切记：如 post-msg => postMsg var childNode = { template: ` {{postMsg}} `, props: ["post-msg"] }; var parentNode = { template: ` `, components: { child: childNode } };

给 childNode 添加一个 props 选项和需要的post-msg数据

效果2 动态 props 传递

动态地绑定父组件的数据到子组件模板的 props,使用v-bind绑定

var parentNode = { template: ` `, components: { child: childNode }, data: function(){ return { msg1:"消息1", msg2:"消息2" }; } // data: { // msg1:"消息1", // msg2:"消息2" // } //这种写法不行。这里设计data的三种写法了 }; data的三种写法与区别 //第一种 data: { msg1:"消息1", msg2:"消息2" } //第二种 data: function(){ return { msg1:"消息1", msg2:"消息2" } } //第三种 data() { return { isLogin: false } }

第3种是第2种的ES6写法其实是一样的。没区别区别： 1）在简单的Vue实例中，没什么区别，因为你app对象不会被复用。 2）但是在组件中，因为可能在多处调用同一组件，所以为了不让多处的组件共享同一data对象，只能返回函数。（即第二三种）

props 验证

我们看到很多这种：

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

其实这是Vue指定的类型。其中详情：

props: { title: String, //表示是一个字符串 likes: Number,//表示是一个数字 isPublished: Boolean, commentIds: Array, author: Object, callback: Function, contactsPromise: Promise // or any other constructor }

举例：

var childNode = { props:{ likes:Number }, template: ` {{likes}} `, }; var parentNode = { template: ` `, components: { child: childNode }, data: function(){ return { msg1: "123", msg2: "123" } } };

给定是Number 传字符串就会报错。

注意：自定义的名称这里需要引号我被坑的：template最后忘了逗号

首先了解几个关键字

type：接受的类型，可多个类型 required：声明这个参数是否必须传入。required: true | false default: 指定当父组件未传入参数时props变量的默认值 validator: 当校验规则很复杂，默认提供的校验规则无法满足的时候可以使用自定义函数来校验 props: { // propA只接受数值类型的参数 propA: Number, // propB可以接受字符串和数值类型的参数 propB: [String, Number], // propC可以接受字符串类型的参数，并且这个参数必须传入 propC: { type: String, required: true }, // propD接受数值类型的参数，如果不传入的话默认就是100 propD: { type: Number, default: 100 }, // propE接受对象类型的参数 propE: { type: Object, // 当为对象类型设置默认值时必须使用函数返回 default: function(){ return { message: 'Hello, world' } } }, // propF使用一个自定义的验证器 propF: { validator: function(value){ return value>=0 && value=0 且

【本文地址】

公司简介

联系我们