vue-父子组件间的传值、父组件调用子组件的方法或变量

一、目的使用组件，能减轻后期维护项目的成本，更有利于维护和开发项目。二、父组件传值给子组件1、步骤（1）父组件的写法（2）子组件的写法2、结果

蛙夏~

7837人浏览 · 2021-07-06 17:23:43

蛙夏~ · 2021-07-06 17:23:43 发布

一、目的

使用组件，能减轻后期维护项目的成本，更有利于维护和开发项目。

二、父组件传值给子组件

1、父子组件的写法
（1）父组件的写法
在这里插入图片描述
（2）子组件的写法

2、结果

三、子组件传值给父组件

1、父子组件的写法
（1）父组件的写法
在这里插入图片描述
（2）子组件的写法

2、运行结果

四、父组件调用子组件的方法或变量

1、父子组件的写法
（1）父组件的写法
在这里插入图片描述
（2）子组件的写法

2、结果
在这里插入图片描述

五、小案例

以上所有案例，我放在了vue项目里，感兴趣的小伙伴，可以下载查看源代码。如下：
1、下载地址：https://download.csdn.net/download/y1238r/20045627
2、运行结果
在这里插入图片描述

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}$/, //不连续的两位字母// /^