父子组件传值小结

1. 父传值给子
子组件 通过props接收, 通过this.属性名使用
//父 import childComp from './childComp' components:{ childComp }, //子 这是简单写法 props: ['sendMsg'] // 推荐写法 props: { type: [String, Number], default: 'sendMsg' }
父组件中, 不加:,代表传递的是固定值, 加:,代表传递的是变量。 如果想传递数字， 需要加:， 否则传递的是字符串
2. 子传值给父
  1. 子组件通过 $emit通知父组件的方法，并将值传递过去。父组件通过函数去处理子组件传过来的值
//父 注意 这里是`@` ,别写成`:` 了 [InvalidCharacterError: "@中间件" did not match the Name production] [InvalidCharacterError: "@func" did not match the Name production] getChildValue(data){ console.log(data); // 我是子传过来的值 } // 子 [InvalidCharacterError: "@click" did not match the Name production] childClick() { this.$emit('func','我是子传过来的值') }
2.使用 :val.sync 和 update:val 传值
这种方法其实就是子传父$emit传值， @接收值的语法糖 。 下面的例子是一个select选择框公共组件, 父通过:val.sync 将 searchObj.pushFlag的值传给子。 子通过props接收, 注意， 不能直接使用传给子的val，否则报错。 在data中先将值赋给value。 最后通过select的change事件， 将值传给父。 父中的值就能直接改变了
// 父 // 子 [InvalidCharacterError: "@change" did not match the Name production]
3. 子调用父的方法
也是用$emit。跟子传值给父的原理是一样的。 没有办法直接操作父组件的方法，需要通过 @子组件方法 = "父组件方法" 这种方式调用父组件方法。 或者简单粗暴的 this.$parent.父组件方法
4. 父调用子的方法
原理是 通过$refs找到子组件，然后调用子组件的方法。当然也可以在对应的方法里传递数据 。this.$refs.xxx.子方法。 还可以进行传值操作， 使用es6的默认值， 会很好用
// 父 this.$refs.child.childFunc()