142Vue-props父子兄弟组件之间传递值【蒙蒙蒙】_props为什么不能兄弟传-CSDN博客

本文链接：https://blog.csdn.net/Gy_9543/article/details/107849892

本文详细介绍了Vue中props的使用，包括通过props从父组件向子组件传递值，子组件如何向父组件反馈信息，以及如何在兄弟组件间进行通信。重点讲解了props的类型检测、默认值、必填属性和自定义验证等功能，强调了单向数据流的原则。

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

props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。

你可以基于对象的语法使用以下选项：

type：可以是下列原生构造函数中的一种：String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数、或上述内容组成的数组。会检查一个 prop 是否是给定的类型，否则抛出警告。Prop 类型的更多信息在此。
default：any
为该 prop 指定一个默认值。如果该 prop 没有被传入，则换做用这个值。对象或数组的默认值必须从一个工厂函数返回。
required：Boolean
定义该 prop 是否是必填项。在非生产环境中，如果这个值为 truthy 且该 prop 没有被传入的，则一个控制台警告将会被抛出。
validator：Function
自定义验证函数会将该 prop 的值作为唯一的参数代入。在非生产环境下，如果该函数返回一个 falsy 的值 (也就是验证失败)，一个控制台警告将会被抛出。你可以在这里查阅更多 prop 验证的相关信息。

父组件向子组件传递值

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <div>{
  {pmsg}}</div>
    <menu-item title='来自父组件的值'></menu-item>
    <menu-item :title='ptitle' content='hello'></menu-item>
    <menu-item :title='pmsg' content='hello'></menu-item>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      父组件向子组件传值-基本使用
    */
    Vue.component('menu-item', {
    
      props: ['title', 'content'],
      data: function () {
    
        return {
    
          msg: '子组件本身的数据'
        }
      },
      template: '<div>{
    {msg + "----" + title + "-----" + content}}</div>'
    });
    var vm = new Vue({
    
      el: