Vue 父子组件通信详解
父子组件的通信
- 子组件是不能引用父组件或者 Vue 实例的数据的。
- 但是，在开发中，往往一些数据确实需要从上层传递到下层：
- 比如在一个页面中，我们从服务器请求到了很多的数据。
- 其中一部分数据，并非是我们整个页面的大组件来展示的，而是需要下面的子组件进行展示。
- 这时，并不会让子组件再次发送一个网络请求，而是直接让大组件（父组件）将数据传递给小组件（子组件）。
- Vue 官方提供了两种方法进行父子间的通信。
- 通过 props 向子组件传递数据。
- 通过事件向父组件发送消息。
- 在真实的开发中，Vue 实例和子组件的通信和父组件和子组件的通信过程是一样的。
父传子：props
- 基本用法：
- 在组件中，使用选项 props 来声明需要从父级接收到的数据。
- props 的传值有两种方式：
- 方法一：字符串数组，数组中的字符串就是传递时的名称。
- 方法二：对象，对象可以设置传递时的类型，也可以设置默认值。
<div id="app"> <cpn :cmovies="movies" :cmessage="message"></cpn> </div> <template id="cpn"> <div> <ul> <li v-for="item in cmovies">{{item}}</li> </ul> <h2>{{cmessage}}</h2> </div> </template> <script> const app = new Vue({ el: '#app', data: { message: '我来了！', movies: ['我在时间尽头等你', '你的婚礼', '我要我们在一起'] }, // 注册组件 components: { Cpn: { template: '#cpn', props: ['cmovies', 'cmessage'], data() { return {} } } } }) </script>
props 数据验证
- 在前面，我们的 props 选项是使用一个数组。
- 除了数组之外，我们也可以使用对象，当需要对 props 进行类型验证时，就需要对象写法了。
- 验证都支持哪些数据类型呢？
- String
- Number
- Boolean
- Array
- Object
- Data
- Function
- Symbol
- 当有自定义构造函数时，验证也支持自定义的类型。
function Person(firstName,lastName){ this.firstName = firstName this.lastName = lastName } Vue.component('blog-post',{ props: { author: Person } })
子传父：$emit()
- props 用于父组件向子组件传递数据，还有一种比较常见的是子组件传递数据或事件到父组件中。
- 这时，我们需要自定义事件来完成。
- 当子组件需要向父组件传递数据时，就用到自定义事件。
- v-on 不仅仅用来监听 DOM 事件，也可以用于组件间的自定义事件。
- 自定义事件的流程：
- 在子组件中，通过 $emit() 来触发事件。
- 在父组件中，通过 v-on 来监听子组件事件。
<div id="app"> <child-cpn @increment="changeTotal" @decrement="changeTotal"></child-cpn> <h2>点击次数：{{total}}</h2> </div> <template id="childCpn"> <div> <button @click="increment">+1</button> <button @click="decrement">-1</button> </div> </template> <script> const app = new Vue({ el: '#app', data: { total: 0 }, methods: { changeTotal(counter) { this.total = counter } }, // 注册子组件 components:{ 'child-cpn':{ template:'#childCpn', data(){ return{ counter:0 } }, methods:{ increment(){ this.counter++ // 将子组件的 increment 事件和 counter 通过 $emit() 发射出去 this.$emit('increment',this.counter) }, decrement(){ this.counter-- // 将子组件的 decrement 事件和 counter 通过 $emit() 发射出去 this.$emit('decrement',this.counter) } } } } }) </script>
父访问子
- 有时候需要父组件直接访问子组件，子组件访问父组件，或者是子组件访问根组件。
- 父组件访问子组件：使用 children或children 或 children或refs 。
- 子组件访问父组件：使用 $parent .
- 先来看一下 $children 的访问。
- this.$children 是一个数组类型，它包含所有子组件对象。
- 通过一个遍历，取出所有子组件的 message 状态。
<div id="app"> <parent-cpn></parent-cpn> </div> <!-- 父组件template --> <template id="parentCpn"> <div> <child-cpn1></child-cpn1> <child-cpn2></child-cpn2> <button @click="showChildCpn">显示所有子组件信息</button> </div> </template> <!-- 子组件template --> <template id="childCpn1"> <h2>我是子组件1</h2> </template> <template id="childCpn2"> <h2>我是子组件2</h2> </template> <script> Vue.component('parent-cpn', { template: '#parentCpn', methods: { showChildCpn() { for (let i = 0; i < this.$children.length; i++) { console.log(this.$children[i].message); // 输出的结果是子组件中的 message 中的内容。 } } }, components: { childCpn1: { template: '#childCpn1', data() { return { message: '我是子组件1' } } }, childCpn2: { template: '#childCpn2', data() { return { message: '我是子组件2' } } } } }) const app = new Vue({ el: '#app', }) </script>
子访问父
- 子访问父使用 $parent 。
- 这种访问方式在开发中不会常用。
<div id="app"> <cpn></cpn> </div> <template id="cpn"> <div> <h2>我是子组件</h2> <button @click="btnClick">访问父组件</button> </div> </template> <script> const app = new Vue({ el: '#app', data:{ message:'我是父组件的内容' }, components:{ 'cpn':{ template:'#cpn', methods:{ btnClick(){ console.log(this.$parent.message); // 输出结果是 Vue 实例中的 message 中的内容 } } } } }) </script>
访问根组件
- 使用 $root 访问根组件，一般也不常用。
- 使用方法参照父子访问的方法。
