Vue day4

组件之间的关系
父子关系
兄弟关系
组件之间的关系
父向子通信：
在子组件新增一个props属性接收传过来的值，其是个数组，可以接收多个值，这里面定义命名和变量一样，props属性会被编译到实例的属性上，其不能与已有的属性重名
在父组件里子组件的标签价里写props定义的属性，用：可以变成父组件动态像子组件传参

<div>我是Home页面<Commonsontitle :wenzi="num1"></Commonsontitle></div>


 const Commonsontitle = {
        template: "#sontitle",
        props: {
          wenzi: {
            type: String,
            require: true,
          },
        },
      };

props数据类型约束：
props可以约束传过来值的数据类型
可以数据类型String Number Boolean Object Array Symbol Function
限制传过来的值props会变成一个对象

props: {
           one:Number,    只限制其数据类型
           two:[String,Boolean],     限制其数据类型是字符串或者布尔
          wenzi: {
            type: String,          type限制其数据类型
            require: true,        非空验证
          },
       shuzi: {
            type: String,  
            defalut:"hahaha"    默认值，如果不传数据默认为默认值
          },
        },

注意：props属性不能在子组件直接修改，其数据是可以被追踪的
组件分类：
容器组件（页面 路由组件）
所有的数据处理或者逻辑处理在容器组件中完成

UI组件
接收数据渲染数据 或者接收数据给容器处理

状态提示
子组件将所有数据处理接收数据全部交给父组件处理管理

这是个规范，增加可维护型
子组件想改props，先发送到父组件，让父组件处理

子向父通信：
通过自定义事件形式

 <template id="sontitle">
      <div>
        <h1>我是公共子组件{{wenzi}}</h1>
        <button @click="huibao"></button>    //现在子组件中定义一个自定义事件
      </div>
    </template>



methods: {
          huibao() {
            this.$emit("chuanzhi", [1, "hah"]);       //再在子组件中定义的自定义事件的方法   中使用$emit这个方法，这个方法有两个参数，（这是自定义事件的名字，[这是要携带的参数，多个可以写成数组形式]）
          },
        },

<template id="home">
      <div>
        我是Home页面<Commonsontitle
          :wenzi="`num1`"
          @chuanzhi="fn"                 //再在父组件中使用自定义的事件，不要加（），如果加（）记得传入参数$event
        ></Commonsontitle>
        {{chuan}} 
      </div>
    </template>

methods: {
          fn(val) {
            console.log(val);        //最后在父组件中获得传入的参数，如果子组件中携带参数，其默认有个参数，就是子组件中携带的数据，
            this.chuan = val;
          },
        },

兄弟组件通信
$emit这个方法是在Vue的原型上，所有的组件和实例都可以调用这个方法
哪个实例 $emit的自定义事件就有哪个实例来监听，
监听这个自定义事件除了在子组件标签上使用@自定义事件来监听，还可以实例.$on（'事件名字',()=>）来监听，

原理：事件中心总线： eventHub eventBus
创建一个第三方实例，第一个兄弟组件中引入这个实例.$emit()

const bus = new Vue();    //引入第三方实例


 <button @click="borther">兄弟传值</button>    //自定义一个事件

methods: {
         borther() {
            bus.$emit("hixiongdi", this.xiongdi);     //在这个事件中引入这个实例，使用$emit来触发
          },    
          },
        },
//第二个兄弟组件
 mounted() {
          bus.$on("hixiongdi", (val) => {          //在第二个组件dom全部加载完后，在第二个兄弟组件中引入这个实例，使用$on来监听
            this.xiongdi = val;
          });
        },

ttips：call，apply方法会立即触发，bind不会触发

其他通信方式（不常用）

ref
方便在vue中获取dom（也可以在组件中获取实例）
使用

  <template id="news">
      <div>
        我是News页面<Commonsontitle
          ref="refsend"              //子组件中标签使用ref属性命名自定义名字的标记
        ></Commonsontitle>
        {{chuan}}{{xiongdi}}
      </div>
    </template>



 mounted() {                               //ref必须要在dom全部加载完毕后获取，这是个钩子函数，意思是真实dom加载完毕后自动触发
          bus.$on("hixiongdi", (val) => {
            this.xiongdi = val;
          });
          this.$refs.refsend.huibao();        //通过实例的$refs获取特定的dom
        },      //父组件可以直接使用子组件的属性和方法

tips：程序之间要高内聚低耦合

实例的$parent和$children属性

$partent可以获取子组件的父组件，如果多个父组件使用了子组件，则默认返回多个父组件

this.$parent      //可以直接调用父组件的属性和方法    

$children可以获取父组件的子组件，默认返回数组

this.$children      //可以直接调用子组件的属性和方法，返回一个数组

provide与inject

//父组件
  provide: {
          a: 50,
          b: "好啊好啊",        //private是一个对象，里面写传的值
        },

//子组件
inject: ["a", "b"],             //inject是一个数组，里面写接收的值