Vue学习笔记 (八) 父子组件通信

父子组件的传值

  • 父传子:通过props向子组件传递数据
  • 子传父:通过自定义事件向父组件发送消息
    在这里插入图片描述

父传子

在这里插入图片描述

props验证

1.默认值

props: {
  cmessage: {
    type: String, 
    default: '默认值', // 默认值
  }

当默认值类型是数组对象时,default后面必须是一个函数

props: {
  cmessage: {
    type: Array, 
    default () {
      return [] 
    }
  }

2.必须传值

props: {
  cmessage: {
    type: String,
    required: true  // 必须传值
  },

3.多个可能的类型

props: {
  cmessage: [String,Number]

4.自定义验证函数

props: {
  cmessage: {
     validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
     }
  }
} 

子传父

  • 在子组件中,通过 $emit() 来发送事件
  • 在父组件中,通过 v-on 来监听子组件事件
    在这里插入图片描述

父子组件访问

父组件访问子组件

1.$children(了解)

this.$children 获取到的是一个数组类型,它包含所有子组件对象
在这里插入图片描述
$children 的缺陷:

通过 $children 访问子组件时,是一个数组类型,访问其中的子组件必须通过索引值,但是当子组件过多,我们需要拿到其中一个时,往往不能确定它的索引值,甚至还可能会发生变化。

有时候,我们想明确获取其中一个特定的组件,这个时候就可以使用 $refs

2.$refs(常用)

$refsref 指令通常是一起使用的

1.首先,我们通过 ref 给某一个子组件绑定一个特定的 ID

<child ref="child1"></cpn>
<child ref="child2"></cpn>

2.其次,通过 this.$refs.ID 就可以访问到该组件了

console.log(this.$refs.child1.name);
console.log(this.$refs.child2.name);

子组件访问父组件(了解)

1.子访问父:$parent

2.访问根组件: $root
在这里插入图片描述
注意:

  • 尽管在 Vue 开发中,我们允许通过 $parent 来访问父组件,但是在真实开发中尽量不要这样做,因为这样耦合度太高了。

  • 子组件应该尽量避免直接访问父组件的数据,如果我们将子组件放在另外一个组件之内,很可能该父组件没有对应的属性,往往会引起问题。

  • 另外,通过 $parent 直接修改父组件的状态,那么父组件中的状态将变得飘忽不定,很不利于调试和维护。

  • 也不推荐 $root 来访问根组件(即 vue 实例),因为根组件中一般只存放路由等重要数据,不存放其他信息。

发布了40 篇原创文章 · 获赞 0 · 访问量 1152
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 游动-白 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览