Vue父子组件通信（总结）

来看，来学，来偷学

1.1父级向子级传递

• 在开发中，往往一些数据需要从上层传递到下层：

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

• 如何进行父子组件之间的通信呢？Vue官方提到

  • 通过props向子组件传递数据（props–>properties–>属性）
  • 通过事件向父组件发送信息

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2kYmpWi5-1609383400160)(C:/Users/Administrator/AppData/Roaming/Typora/typora-user-images/image-20201230101653001.png)]

• 在下面代码中我们将vue实例当做父组件，并且其中包含子组件来简化代码。

1.1.1.props基本用法

• 在子组件中，使用选项props来声明需要从父级接收到的数据。

• props的值有两种方式：

  • 方式一 ：字符串数组，数组中的字符串就是传递时的名称。

    //第一种写法：直接跟数组
    //props:['cpnbooks']
    
    

  • 方式二 ： 对象，对象可以设置传递时的类型，也可以设置默认值等。

    //props:{
    //           cpnbooks:{
    //                type:Array
    //            }
    //        }
    //并且可以设置默认值
    //default(){
    //        return 'a'
    //          }```
    

---

• 在刚才我们的props使用了一个数组。

• 我们说过除了数组之外，我们也可以使用对象，当需要对props进行类型等验证的时候，就需要对象写法了。

• 验证都支持哪些类型？

  • String

  • Number

  • Boolean

  • Array

  • Object

  • Date

  • Function

  • Symbol

1.2.子级向传父级传递

• 问题：

子组件在发生某些事件的时候给父组件传递一些东西，父组件再根据我们传过来的东西去请求一些数据。

• 我们该如何处理呢？

• 当子组件向父组件传递数据时，我们就要用到自定义事件了。

• 自定义事件的流程：

• 在子组件中，通过$emit()来触发事件。

• 在父组件中，通过v-on来监听子组件事件。

  data(){
      return{
          categories:[
              {id:'aaa',name:'手机数码'}
          ]
      }
  },
  

  btnclick(item){
      this.$emit('itemclick',item)
  }
  

• partent—>child

< html lang=“en”>
< head>
< meta charset=“UTF-8”>
< title>Title
< /head>
< body>

< div id=“app”>
< cpn :cmovies=“books”>
< /div>
< template id=“cpn”>
< div>
< ul>
< li v-for=“item in cmovies”>
{{item}}
< /li>
< /ul>

< /div>
< /template>
< script src="…/…/lib/vue.js">
< script>
//父传子：props
const cpn={
template:’#cpn’,
//1.直接跟数组名字
// props:[‘cmovies’],
props:{
//要求传入必须是一个Array
//2.类型限制
//cmovies:Array,
//3.来一个默认值,以及必须穿
cmovies:{
type:Array,
//
default(){
return ‘aaa’
}
//required:false
}
}
}
const app = new Vue({
el:’#app’,
data:{
message:‘元旦快乐’,
books:[‘飘’,‘白夜行’,‘百年孤独’,‘云边有个小卖部’]
},
components:{
cpn
}
})

** child-->partent