欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue.js父子组件通信--父传子

程序员文章站 2022-03-07 22:04:43
父子组件通信-父传子一丶父子组件的通信二丶props数据验证三丶案例代码四丶运行结果——千磨万击还坚劲,任尔东西南北风——一丶父子组件的通信子组件是不能是不能引用父组件或者Vue实例的数据的在开发中,往往一些数据确实需要从上层传递到下层比如在一个页面中,我们从服务器请求到了很多数据其中一些数据,并非是我们整个页面的大组件来展示的,而是需要下面的子组件进行展示这个时候,并不会让子组件再次发送一个一次网络请求,而是直接让大组件(父组件)将数据传递给小组件(子组件)如何进行父子组件间的通信呢...

一丶父子组件的通信

  • 子组件是不能是不能引用父组件或者Vue实例的数据的
  • 在开发中,往往一些数据确实需要从上层传递到下层
    • 比如在一个页面中,我们从服务器请求到了很多数据
    • 其中一些数据,并非是我们整个页面的大组件来展示的,而是需要下面的子组件进行展示
    • 这个时候,并不会让子组件再次发送一个一次网络请求,而是直接让大组件(父组件)将数据传递给小组件(子组件)
  • 如何进行父子组件间的通信呢?Vue官方提到
    • 通过props向子组件传递数据
    • 通过自定义事件向父组件发送消息
    • Vue.js父子组件通信--父传子

二丶props数据验证

  • props可以是一个数组,也可以是对象
  • 当需要对props进行类型验证时,就需要对象写法了
  • 对象写法支持类型:
    • String
    • Number
    • Boolean
    • Array
    • Object
    • Date
    • Function
    • Symbol
  • 当我们有自定义构造函数时,验证也支持自定义类型

三丶案例代码

<!--作者:key-->
<!--浏览工具:Chrome-->
<!--开发工具:WebStorm-->
<!--开发时间:2020/11/26 8:48-->

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

<template id="my_cpn">
  <div>
    <ul>
      <li v-for="movie in cmovies">{{movie}}</li>
    </ul>
    <p>{{cmovies}}</p>
    <p>{{cmessage}}</p>
  </div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const my_cpn ={
    template:'#my_cpn',
    // 传递数组
    // props:['cmovies','cmessage'],
    // 传递对象,控制传递类型的限制
    // 传递对象,提供一些默认值
    props:{
      // cmovies:Array,
      // cmessage:String,
      cmessage:{
        type: String,     // 限制类型
        default:"full",   // 设置默认值,默认值在没有传值的情况下,会自动显示默认值
        require:false     // 如果为True,那么就是必传值,不传就会报错
      },
      cmovies:{
        type:Array,
        default(){
          return []
        }
      }
    },
    data(){
      return{

      }
    }
  }
  const app = new Vue({
    el:"#app",
    data:{
      message:'hello',
      movies:['海王','海贼王','海尔兄弟'],
    },
    components:{
      my_cpn
    }
  })
</script>
</body>
</html>

四丶运行结果

Vue.js父子组件通信--父传子

——千磨万击还坚劲,任尔东西南北风——

本文地址:https://blog.csdn.net/weixin_43402353/article/details/110160175