Vue学习总结（十三）——父子组件通信

最新推荐文章于 2023-09-11 18:23:56 发布

VIP文章田小江爱分享

最新推荐文章于 2023-09-11 18:23:56 发布

阅读量438

点赞数

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

本文链接：https://blog.csdn.net/third_/article/details/119919012

版权

1、父子组件的通信

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

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

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

Vue官方关于父子组件间的通信提到了：

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

真实的开发中，Vue实例和子组件的通信和父组件和子组件的通信过程是一样的。

2、父传子--props基本用法

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

props的值有两种方式：

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

（1）当props是数组的时候的用法：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app">
    <h2>
      <cpn :cmovies="movies" :cmessage="message"></cpn>
    </h2>
  </div>
  <template id='cpn'>
    <div>
      <ul>
        <li v-for="item in cmovies">{
  {item}}</li>
      </ul>
      <div>{
  {cmessage}}</div>
    </div>
  </template>
  <script src="../../js/vue.js"></script>
  <script>
    // 父传子：使用props
    const cpn = {
      template: '#cpn',
      props: ['cmovies', 'cmessage']
    }
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好呀',
        movies: ['海王', '海贼王', '海尔兄弟']
      },
      components: {
        cpn
      }
    })
  </script>
</body>
</html>

（2）当props是对象的时候，props数据验证

当需要对props进行类型等验证时，就需要对象写法了。

验证都支持哪些数据类型呢？

String
Number
Boolean
Array
Object
Date
Function
Symbol

当我们有自定义构造函数时，验证也支持自定义的类型。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app">
    <h2>
      <!--当没有传message的时候，会使用默认值-->
      <cpn :cmovies="movies"></cpn>
    </h2>
  </div>
  <template id='cpn'>
    <div>
      <ul>
        <li v-for="item in cmovies">{
  {item}}</li>
      </ul>
      <div>{
  {cmessage}}</div>
    </div>
  </template>
  <script src="../../js/vue.js"></script>
  <script>
    // 父传子：使用props
    const cpn = {
      template: '#cpn',
      // props: ['cmovies', 'cmessage', 'propB', 'propC', 'propD']
      props: {
        // 1.类型限制
        // cmovies: Array,
        // cmessage: String
        // 2.提供一些默认值
        cmessage: {
          type: String,
          default: 'hello world',
          // 3、当required是true的时候必须传这个值
          // required: true
        },
        cmovies: {
          type: Array,
          // Vue

最低0.47元/天解锁文章

田小江爱分享

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue学习总结（十三）——父子组件通信

1、父子组件的通信在上一个小节中，我们提到了子组件是不能引用父组件或者Vue实例的数据的。但是，在开发中，往往一些数据确实需要从上层传递到下层：比如在一个页面中，我们从服务器请求到了很多的数据。其中一部分数据，并非是我们整个页面的大组件来展示的，而是需要下面的子组件进行展示。这个时候，并不会让子组件再次发送一个网络请求，而是直接让大组件（父组件）将数据传递给小组件（子组件）。Vue官方关于父子组件间的通信提到了：通过prop向子组件传递数据。通过事件向父组件发送消息。真实的.
复制链接

扫一扫