Vue2 porps默认值传值书写方式

122 阅读1分钟

vue2 父子组件传值,自定义属性 # findIndex()的用法

props有三种表达方式 第一种数组

props:[ img : ' ' , a : ' ' , b : ' ' , ] 纯数组表达方式,不能自定义类型

props有三种表达方式 第二种对象直接写类型

props: { formType:String, arr:Array, b:number },

props有三种表达方式 第三种对象带默认值

props: { title: { type: String, default: '' }, showMore: { type: Boolean, default: true }, list: Array, listType: { type: String, default: 'one' } }

findIndex()的用法

此案例是组件传值的一个方法中用到findIndex(),用于判断选中项是否选中,返回索引确定选中项
// 实现右边组件与中间组件传值关联,监听表单组件的表单变化
// 触发change时可以拿到 e 为   {key: 'placeholder', value: '请输入搜索关键词1'}
// 故直接赋值即可
onCurrentComponentChange(e) {
  // 拿到当前选中项
  const i = this.templates.findIndex(v => v.checked)
  // 通过 findIndex 返回值判断是否选中
  if (i !== -1) {
    // 此时拿到的是templates的第[i]项的值({checked: true   placeholder: "请输入搜索关键词1"   type:"search"})
    // 此时e 里面key 的值为(placeholder),
    // 所以把e.value赋值给 templates里面的placeholder,即可完成传值
    this.templates[i][e.key] = e.value
  }
},