【Vue】父子组件值及方法传递使用

父子组件值、方法引用

1、值

1.1 父组件获取子组件值

父组件

子组件

测试结果在控制台查看

1.2 子组件获取父组件值

方式1：

props: ['parentName']

方式2：

props: {
  parentName: String //这样可以指定传入的类型，如果类型不对，会警告
}

方式3：

props: {
    msgVal: {
      type: String, //指定传入的类型
      //type 也可以是一个自定义构造器函数，使用 instanceof 检测。
      default: '' //这样可以指定默认的值
    }
}

注意：props 会在组件实例创建之前进行校验，所以在 default 或 validator 函数里，
诸如 data、computed 或 methods 等实例属性还无法使用

父组件

子组件

2、方法

2.1 父组件调用子组件方法

父组件

子组件

2.2 子组件调用父组件方法

父组件

子组件