Vue.js学习笔记——11.组件化开发（二）

最新推荐文章于 2024-01-20 10:00:00 发布

土拨鼠的忧伤丶

最新推荐文章于 2024-01-20 10:00:00 发布

阅读量169

点赞数 1

分类专栏： Vue.js学习笔记文章标签： vue.js

本文链接：https://blog.csdn.net/DDDDDecade/article/details/110442829

版权

本文详细介绍了Vue.js中父子组件的通信和访问方式，包括：1. 父组件通过props向子组件传递数据，2. 子组件通过自定义事件向父组件传递数据，3. 父组件通过$children和$refs访问子组件，4. 子组件使用this.$parent和this.$root访问父组件和根组件。通过实例展示了具体的用法和注意事项。

摘要由CSDN通过智能技术生成

六、父子组件的通信

1.父传子——props

在实际开发中，我们从服务器请求到了很多数据，并不是在整个页面的大组件来展示的，而是需要下面的子组件进行展示，这时不会让子组件再次发生一个网络请求，而是直接让父组件将数据传递给子组件。父组件向子组件传递数据有两种方式：一是通过props；二是通过事件。

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

字符串数组，数组中的字符串就是传递时的名称；
对象，对象可以设置传递时的类型，也可以设置默认值等；
篇幅有限，这里只说明常用的对象方式。

由于Vue实例可以看作所有组件的根组件，Vue实例的数据要传入子组件时，在注册时往props传入一个对象，然后在使用时用v-bind将props中的属性和data中的数据绑定即可实现传值。
举例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!-- 使用组件 -->
  <cpn :cmovies="movies" :cmessage="message"></cpn>
</div>

<!--模板标签-->
<template id="cpn">
  <div>
    <ul>
      <li v-for="item in cmovies">{
  {item}}</li>
    </ul>
    <p>{
  {cmessage}}</p>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  // 注册全局组件
  Vue.component(`cpn`,{
    
    template:`#cpn`,
    props:{
    
    //指定类型
      cmessage:String,
      cmovies:Array
    }
  })

  const app = new Vue({
    
    el:"#app",
    data:{
    
      message:`你好啊`,
      movies:[`海王`,`海贼王`,`海尔兄弟`]
    }
  })
</script>
</body>
</html>

执行结果：
父传子
指定类型支持以下类型：

String
Number
Boolean
Array
Object
Date
Function
Symbol

除了指定类型，还可以设置默认值或是否必填等：

Vue.component(`cpn`,{
   
    template:`#cpn`,
    props:{
   
      // 基础的类型检查（'null'匹配任何类型）
      propA:Number, 
      // 多个可能的类型
      propB:[String,Number], 
      //  必填的字符串
      propC:{
   
        type:String,
        required:true
      }, 
      //  带默认值的数字
      propD:{
   
        type: Number,
        default:100
      },