vue组件通信 笔记

1.父向子通信代码示例

父向子传值步骤

1. 给子组件以添加属性的方式传值

2. 子组件内部通过props接收

3. 模板中直接使用 props接收的值

2.子向父通信代码示例

子向父传值步骤

1. $emit触发事件，给父组件发送消息通知

2. 父组件监听$emit触发的事件

3. 提供处理函数，在函数的性参中获取传过来的参数

 3.props

1.Props 定义

组件上 注册的一些 自定义属性

2.Props 作用

向子组件传递数据

3.特点

1. 可以 传递 任意数量 的prop

2. 可以 传递 任意类型 的prop

3. prop 的数据是外部的 → 不能直接改，要遵循 单向数据流

4. 父级props 的数据更新，会向下流动，影响子组件。这个数据流动是单向的

4.props校验

1.作用

为组件的 prop 指定验证要求，不符合要求，控制台就会有错误提示 → 帮助开发者，快速发现错误

2.语法

• 类型校验

• 非空校验

• 默认值

• 自定义校验

3.完整写法

props: {
  校验的属性名: {
    type: 类型,  // Number String Boolean ...
    required: true, // 是否必填
    default: 默认值, // 默认值
    validator (value) {
      // 自定义校验逻辑
      return 是否通过校验
    }
  }
},

1.default和required一般不同时写（因为当时必填项时，肯定是有值的）

2.default后面如果是简单类型的值，可以直接写默认。如果是复杂类型的值，则需要以函数的形式return一个默认值

4.非父子通信-event bus 事件总线

1.作用

非父子组件之间，进行简易消息传递。

2.步骤

1. 创建一个都能访问的事件总线 （空Vue实例）

   import Vue from 'vue'
   const Bus = new Vue()
   export default Bus

2. A组件（接受方），监听Bus的 $on事件

   created () {
     Bus.$on('sendMsg', (msg) => {
       this.msg = msg
     })
   }

5.v-model 拆分 实现父子组件双向通信

1.原理（vue2）：

v-model本质上是一个语法糖。例如应用在输入框上，就是value属性 和 input事件 的合写

<template>
  <div id="app" >
    <input v-model="msg" type="text">
​
    <input :value="msg" @input="msg = $event.target.value" type="text">
  </div>
</template>
​

1.原理（vue3）：modelValue 和 update:modelValue

   <select :value="modelValue" @change="handleChange">

2.作用：

提供数据的双向绑定

• 数据变，视图跟着变 :value

• 视图变，数据跟着变 @input

3.注意

$event 用于在模板中，获取事件的形参

：value 是渲染父组件传过来的值，当数值发生更新  会向父组件传个值

子组件（vue2）

<template>
    <div>
      <select :value="value" @change="handleChange">
        <option value="101">北京</option>
        <option value="102">上海</option>
        <option value="103">武汉</option>
        <option value="104">广州</option>
        <option value="105">深圳</option>
      </select>
    </div>
  </template>
  

  <script>
  export default {
    props: {
    value: String
  },
  methods: {
    handleChange (e) {
      this.$emit('input', e.target.value)
    }
  }  
  }

 父组件（vue2）

<BaseSelect v-model="selectId"></BaseSelect>

子组件（vue3）

<template>
  <Baseform v-model="selectId"></Baseform>
</template>

<script>

import headerLayout from './components/HeaderLayout.vue';
import Container from './components/Container.vue';
import Baseform from './components/Baseform.vue';

export default {
  components: {

    headerLayout,
    Container,
    Baseform
  },
  
  data() {
    return {
      selectId: '102',
    }
  }
}
</script>

<style scoped>


</style>

父组件（vue3）

<template>
    <div>
      <select :value="modelValue" @change="handleChange">
        <option value="101">北京</option>
        <option value="102">上海</option>
        <option value="103">武汉</option>
        <option value="104">广州</option>
        <option value="105">深圳</option>
      </select>
    </div>
  </template>
  

  <script>
  export default {
    props: {
        modelValue: String,
    
  },
  data(){
      return {
      
      }
    },
  methods: {
    handleChange (e) {
  
      this.$emit('update:modelValue', e.target.value)
    }
  }  
  }
  </script>