Vue学习Day5 父子组件通信（props、自定义事件）、父子组件访问（$refs、$parent）

想利用暑假时间好好学习一下vue，会记录每一天的学习内容。
今天是学习vue的第5天！

起起伏伏乃人生常态，继续加油～

---

---

1.父向子传递

在上一个小节中，我们提到了子组件是不能引用父组件或者Vue实例的数据的

但是在开发中，往往一些数据确实需要从上层传递到下层

• 比如在一个页面中，我们从服务器请求到了很多数据
• 其中一部分数据，并非是我们整个页面的父组件来展示的，而是需要下面的子组件进行展示
• 这个时候，并不会让子组件再次发送一个网络请求，而是直接让父组件将数据传递给子组件

如何进行父子组件之间的通信？

• 通过 props向子组件传递数据
• 通过事件向父组件发送消息

---

props基本用法

在组件中，使用选项props来声明需要从父级接收到的数据
props的值有两种方式：

• 方式1：字符串数组，数组中的字符串就是传递时的名称
• 方式2：对象，对象可以设置传递时的类型，也可以设置默认值等

此例中使用了字符串数组，注意这里的'childMovies'并不代表字符串

---

prop的大小写

浏览器会把HTML中的所有大写字符解释为小写字符，这意味着，当在template和props中使用了驼峰命名，在HTML中用v-bind绑定时，需要使用与该驼峰命名的prop名等价的短横线分割命名

如上例：
在template和props中，childMovies使用了驼峰命名，但在HTML的<cpn :child-movies="movies"></cpn>中，不能使用:childMovies，要转换为等价的child-movies

---

props数据验证

我们可以为组件的prop指定验证要求，如果有一个需求没有满足，则Vue会在控制台中警告。
为了定制prop的验证方式，可以为props中的值提供一个带有验证需求的对象，而不是一个字符串数组。

验证支持的数据类型

• String
• Number
• Boolean
• Array
• Object
• Date
• Function
• Symbol

props: {
	// 基础的类型检查
	propA: Number,
	// 多个可能的类型
	propB: [String, Number],
	// 必填的字符串
    propC: {
		type: String,
		required: true
    },
	// 带有默认值的数字
	propD: {
		type: Number,
		default: 100
    },
	// 带有默认值的对象
    propE: {
		type: Object,
		// 对象或数组默认值必须从函数获取
		default () {
        	return { 
        		message: 'hello' 
        	}
      	}
    },
    // 自定义验证函数
    propF: {
		validator (value) {
        	// 这个值必须匹配下列字符串中的一个
        	return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
}

---

2.子向父传递

事件名大小写

不同于组件和 prop，触发的事件名需要跟监听这个监听所用的名称完全一致
举个例子：
如果触发一个驼峰命名的事件：

this.$emit('myEvent')

则监听这个事件对应的短横线命名是不会有任何效果的：

<!-- 没有效果 -->
<cpn @my-event="doSomething"></cpn>

v-on事件监听器在DOM模版中会被自动转换为全小写（因为HTML对大小写是不敏感的），所以v-on:myEvent将会变成v-on:myevent，这会导致myEvent无法被监听到

因此，推荐始终使用短横线命名事件

自定义事件

上面提到的props用于父组件向子组件传递数据，还有一种比较常见的是子组件传递数据或事件到父组件中

这时，我们需要使用自定义事件来完成
自定义事件的流程：

• 在子组件中，通过$emit()来发射自定义事件
• 在父组件中，通过v-on (@）来监听子组件的自定义事件

⚠️：自定义事件名用短横线命名，自定义事件监听器也要用短横线命名，要完全匹配。

---

3.结合双向传递绑定案例

输入值与子组件中的值与父组件中的值同步变化

---

4.父子组件的访问方式

有时候我们需要父组件直接访问子组件，子组件直接访问父组件，或者子组件访问根组件

• 父组件访问子组件：使用$children或$refs
• 子组件访问父组件：使用$parent

父访问子

1.$children的访问

• this.$children是一个数组类型， 它包含了所有子组件对象

但是，有时候我们会进行组件的插入操作，比如上例中三个子组件<cpn></cpn>，这时候如果我们向其中插入了其他组件，那么访问时候的this.$children下标也要更改
所以一般我们想拿到子组件对象时会使用$ref

---

2.$refs的访问

当子组件中没有绑定属性时，this.$refs默认返回一个空对象，在子组件中绑定属性了之后，可以直接通过属性来访问该子组件

---

子访问父

利用this.$parent可访问父组件
利用this.$root可访问根组件

（不常用）

---