详解vue组件之间的通信-创新互联

说明：下面我总结了比较常用的vue组件之前通信的方式，最近准备面试，所以有些总结贴上来分享

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：申请域名、虚拟空间、营销软件、网站建设、石鼓网站维护、网站推广。

props和$emit

只有父子关系才可以用这种方式，父组件向子组件传递参数用props，子向父传递使用触发$emit自定义事件

1.props

...
data () {
 return {
  name: 'marry'
 }
}



post: {
 id: 1,
 title: 'My Journey with Vue'
}
//等价于下面




...
//以字符串数组形式列出的 prop
props: ['name', 'age', 'address']

//prop验证, 当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告
//注意：以下类型不能写成'String'这种带引号的形式
props: {
 // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
 propA: Number,  
 // 多个可能的类型
 propB: [String, Number],
 // 必填的字符串
 propC: {
  type: String,
  required: true
 },
 // 带有默认值的数字
 propD: {
  type: Number,
  default: 100
 },
 // 带有默认值的对象
 propE: {
  type: Object,
  // 对象或数组默认值必须从一个工厂函数获取
  default: function () {
  return { message: 'hello' }
  }
 },
 // 自定义验证函数
 propF: {
  validator: function (value) {
  // 这个值必须匹配下列字符串中的一个
  return ['success', 'warning', 'danger'].indexOf(value) !== -1
  }
 }
}
//注意那些 prop 会在一个组件实例创建之前进行验证，所以实例的 property (如 data、computed 等) 在 default 或 validator 函数中是不可用的。

网页名称：详解vue组件之间的通信-创新互联
分享网址：http://bzwzjz.com/article/csejoi.html