父子组件通信

背景

=======================

父传子 Props

attribute：标签属性，如class、id、style这些都是属性。

作用

多用于，父组件统一从服务器获取数据，然后把部分数据传给子组件使用。而不是子组件再发一次网络请求。

写法

1、字符串数组

简单，但并不能对其进行任何形式的限制

<template>
  <div>
    <show-message id="abc" class="why" title="哈哈哈" content="我是哈哈哈哈" message-info=""> 这是传字符串数据 </show-message>
    <show-message title="呵呵呵" content="我是呵呵呵呵">这是传字符串数据</show-message>
    <show-message :title="title" :content="content">这是传变量数据</show-message>
    <show-message :title="message.title" :content="message.content">可以传对象中的属性</show-message>
    <show-message v-bind="message"> 可以传整个对象 </show-message>
    <multi-root-element id="aaaa"></multi-root-element>
  </div>
</template>
<script>
  import ShowMessage from './ShowMessage.vue';
  import MultiRootElement from './MultiRootElement.vue';
  export default {
    components: { // 父组件内注册子组件
      ShowMessage,
      MultiRootElement
    },
    data() {
      return {
        title: "嘻嘻嘻",
        content: "我是嘻嘻嘻嘻",
        message: {
          title: "嘿嘿嘿",
          content: "我是嘿嘿嘿"
        }
      }
    }
  }
</script>
<style scoped>
</style>

2、对象类型

可以对传入的数据增加验证和限制，否则会报警告。

子组件

<template>
  <div>
    <h2 v-bind="$attrs">{{title}}</h2>
    <p>{{content}}</p>
  </div>
</template>
<script>
  export default {
    // props: ['title', 'content'] 字符串数组写法
    props: {
      // 1、字符串
      title: String,  // 指定类型，父数据传入子组件时，检查数据是否是props给定的类型，否则抛出警告。
      // 2、对象
      content: {
        type: String, // 指定类型，父数据传入子组件时，检查数据是否是props给定的类型，否则抛出警告。
        required: true, // 父组件是否必须传给我
        default: "123" // 默认值，一般和required 二选一就可以了
      },
      counter: {
        type: Number,
        validator: function (value) { // 自定义校验规则，父数据传入子组件时，检查数据是否符合我的规则
          return value >= 0
        }
      },
      info: {
        type: Object,
        default() { // 注意，传对象带有默认值，默认值必须是一个函数，否则组件复用时，多个这个组件会指向同一个对象！
          return {name: "why"}
        }
        /*
        default:{name: "why"} // 这种情况，本组件多次复用会指向同一个对象{name: "why"}，任意一个修改会影响到其他的
        */
      },
    }
  }
</script>
<style scoped>
</style>

验证数据类型 type

如下子组件里的msg：String 就是验证数据类型，可以验证原生的String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数、或上述内容组成的数组。

注意！
要验证，父组件传入的属性，如果要验证数值（Number）、布尔值（Boolean）、数组（Array）、对象（Object），一定得用v-bind绑定，才能传入，直接写会报错的

//age验证Number，一定得用v-bind 绑定传入
<Title1 :msgSend="word" :age="321"></Title1>
//不绑定变量，会报错
<Title1 :msgSend="word" age=321></Title1>

在ts中使用

// 1、需要引入 PropType 类型
import { PropType } from "vue"
// 2、props 属性中，要按下面 as PropType<你自己定义的类型> 的方式使用
props:{
    formProps: {
    type: Object as PropType<你自己定义的类型>,
    default() {
      return {}
    }
  },
}

其他特性

1、传入对象所有的Key：value

父组件

<blog-post v-bind="post"></blog-post>
等价于：
<blog-post
  v-bind:id="post.id"
  v-bind:title="post.title"
></blog-post>

2、非Props的属性 与 继承（重要）

禁用属性Attribute继承，如下代码，这样就不会把属性添加到下面根节点的 div 中

<template>
  <div>
    <h2 v-bind="$attrs">{{title}}</h2>
    <p>{{content}}</p>
  </div>
</template>
<script>
  export default {
    inheritAttrs: false, // 设置禁用继承
    props: {
      // 众多props...........
    }
  }
</script>
<style scoped>
</style>

Vue3允许一个.vue文件里面的