总结Vue父子组件相互传值和路由传值的两种方式【后续更新】

1、父到子思路总结：1、定义子组件接收父组件的变量在props['child'],的单独的属性中，与data()平行；2、在父组件中给子组件中定义的变量赋值==> :child="parentMessage"parentMessage为父组件响应系统中的变量2、子到父1、父组件自定义指令，如： @Transfer=show2、子组件想父组件的指令进行传值，如：this.$.emit('tr

pshdhx_albert

4705人浏览 · 2020-07-23 17:17:58

pshdhx_albert · 2020-07-23 17:17:58 发布

1、父到子

思路总结：

1、定义子组件接收父组件的变量在props['child'],的单独的属性中，与data()平行；

2、在父组件中给子组件中定义的变量赋值==> :child="parentMessage" parentMessage为父组件响应系统中的变量

2、子到父

1、父组件自定义指令，如： @Transfer=show

2、子组件想父组件的指令进行传值，如：this.$.emit('transfer',要传的变量=transferValue)

3、父组件指令绑定的方法进行取值，如：在方法中show(传递的变量值=transferValue){ this.a = transferValue}，记得在data()中用变量a进行接收；

3、this.$route.params

4、this.$route.query

路由代码：

https://github.com/pshdhx/LearnVueRouter

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^