vue3中的父子组件通讯详情

目录
  • 一、传统的props
  • 二、通过modeValue绑定
  • 三、事件广播(vue3中$on和$emit已废弃),使用新的插件mitt

一、传统的props

通过在父组件中给子组件传值,然后在子组件中通过props接受数据

 //父组件
  <ValidateInput
       type="text"
       v-model="emailVal"
       :rules='emailRules'
       placeholder='请输入邮箱地址'
       ref="inputRef"
  >
  </ValidateInput>

 //子组件
 export default defineComponent({
   name: 'ValidateInput',
   props: {
    rules: Array as PropType <RulesProp>,
     modelValue: String
   },
 }

二、通过modeValue绑定

//v-model简写
<ValidateInput
  type="text"
  v-model="emailVal"
  placeholder='请输入邮箱地址'
  ref="inputRef"
 >
</ValidateInput>

//实际上是
<ValidateInput
  type="text"
  :emailVal="emailVal"
  @update:modelValue="方法"
  placeholder='请输入邮箱地址'
  ref="inputRef"
 >
</ValidateInput>

//子组件
<template>
  <div class="inputItem">
    <input
      type="text"
      :value="inputRef.val"
      @input="updateValue"
      id="emial"
      >
  </div>
</template>
export default defineComponent({
  name: 'ValidateInput',
  props: {
    rules: Array as PropType <RulesProp>,
    modelValue: String
  },
  setup (props, context) {
    const inputRef = reactive({
      val: props.modelValue || '',
      isError: false,
      message: ''
    })
    const updateValue = (e:KeyboardEvent) => {
      const targetValue = (e.target as HTMLInputElement).value
      inputRef.val = targetValue
      context.emit('update:modelValue', targetValue)
    }
    return {
      inputRef,
      updateValue
    }
  }

三、事件广播(vue3中$on和$emit已废弃),使用新的插件mitt

Vue3.0版本中把on,off、onece等事件函数移除了,emit()用于父子组件之间的沟通。为了能够使用事务总线,除了emit触发函数还得有on监听函数。官方推荐使用第三方库mitt

首先安装第三方库mitt

npm install --save mitt

然后在程序中使用事件总线:

 //父组件接受'form-item-created'频道
 <script lang="ts">
  import { defineComponent, onUnmounted } from 'vue'
  import mitt from 'mitt'
  export const emitter = mitt()
  export default defineComponent({
    name: 'ValidateForm',
    setup () {
      const callback = (test: string) => {
       console.log(test)
     }
     emitter.on('form-item-created', callback)
    onUnmounted(() => {
      emitter.off('form-item-created', callback)
     })
     return {}
   }
})
 </script>
 //子组件发送信息
 onMounted(() => {
       console.log(inputRef.val)
       emitter.emit('form-item-created', inputRef.val)
 })

到此这篇关于vu3中的父子组件通讯详情的文章就介绍到这了,更多相关vu3组件通讯内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue.js 父子组件通讯开发实例

    vue.js,是一个构建数据驱动的 web 界面的库.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.(这是官方的一个解释!) 小编没使用过angularjs,也没使用过react.js,不能详细的说明三者的区别,想了解的话,在官方有一个分析,请点这里查看 小编从业前端开发也有了一年多的时间,刚开始的时候,前端开发展现的技术太多,小编有心无力,兼顾不过来,经过了解之后,还是选择了学原生js基础兼并jquery的学习上路.小编使用vue.js,也是因为业务的需求

  • Vue中的父子组件通讯以及使用sync同步父子组件数据

    前言 父子组件通讯,可分为两种情况: 1. 父组件向子组件中传递数据 2. 子组件向父组件中传递数据 一般情况下, 1中情况可通过props解决数据传递的问题, 这里就不多赘述了. 子组件向父组件中传递数据 主要谈谈2中情景的实现,有三种方式: 一. 通过props,父组件向子组件中传递数据和改变数据的函数,通过在子组件中调用父组件传过来的函数,达到更新父组件数据(向父组件传递数据)的作用(子组件中需要有相应的响应事件) 二. 通过在子组件中触发一个 自定义事件(vm.$emit),将数据作为v

  • Vue中父子组件通讯之todolist组件功能开发

    一.todolist功能开发 <div id="root"> <div> <input type="text" v-model="inputValue"> <button @click="handleSubmit">提交</button> </div> <ul> <li v-for="(item, index ) of list

  • Vue2与Vue3兄弟组件通讯bus的区别及用法

    目录 vue2.x vue3.x tiny-emitter插件用法 mitt插件用法 vue2.x Vue.prototype.$bus=new Vue() 监听: this.$bus.$on('方法名',(参数)=>{}),它可以累加 触发: this.$bus.$emit('方法名',实参值) 销毁:this.$bus.$off('方法名'),谁监听谁销毁 注意: 由于监听可以累加, 所以必须要有第四步销毁 vue3.x tiny-emitter插件用法 安装插件 npm i tiny-em

  • VueJs组件之父子通讯的方式

    组件(父子通讯) 一.概括 在一个组件内定义另一个组件,称之为父子组件. 但是要注意的是:1.子组件只能在父组件内部使用(写在父组件tempalte中); 2.默认情况下,子组件无法访问父组件上的数据,每个组件实例的作用域是独立的: 那如何完成父子如何完成通讯,简单一句话:props down, events up :父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送 父传子:Props 子传父:子:$emit(eventName) 父$on(eventName

  • vue 通过下拉框组件学习vue中的父子通讯

    如果说vue组件化开发中第一步应该了解的是什么的话,那无疑是父子组件之间是如何实现通讯的(说白了就是父子组件中数据是如何传递的),只有理解了这一步,才能更好的开发组件 这里先提出两个关键词: props 与 emit : 写这个组件之前,先看看效果图: 组件开发分析: 既然是组件: 首先组件内部数据内容肯定是可变的(如上图中的"按时间排序"之类的),这必须由父组件传入(即父组件如何将数据传个父组件); 在选择了内容之后,如何将数据传出来(即子组件如何将数据传给父组件) 先写结构: 父组

  • vue3中的父子组件通讯详情

    目录 一.传统的props 二.通过modeValue绑定 三.事件广播(vue3中$on和$emit已废弃),使用新的插件mitt 一.传统的props 通过在父组件中给子组件传值,然后在子组件中通过props接受数据 //父组件 <ValidateInput type="text" v-model="emailVal" :rules='emailRules' placeholder='请输入邮箱地址' ref="inputRef" &g

  • Vue3中10多种组件通讯方法小结

    目录 Props emits expose / ref Non-Props 单个根元素的情况 多个元素的情况 v-model 单值的情况 多个 v-model 绑定 v-model 修饰符 插槽 slot 默认插槽 具名插槽 作用域插槽 provide / inject 总线 bus getCurrentInstance Vuex State Getter Mutation Action Module Pinia 安装 注册 mitt.js 安装 使用 本文讲解 Vue 3.2 组件多种通讯方式

  • 详解Angular父子组件通讯

    概述 Angular组件间通讯 组件树,1号是根组件AppComponent. 组件之间松耦合,组件之间知道的越少越好. 组件4里面点击按钮,触发组件5的初始化逻辑. 传统做法:在按钮4的点击事件里调用组件5的方法.紧密耦合. Angular:在组件4根本不知道组件5存在的情况下实现. 使用松耦合的方式在组件之间传递数据开发出高重用性的组件. 使用输入输出属性在父子关系的组件之间传递数据. 一.输入输出属性概述 组件设计成黑盒模型,用输入属性声明从外部世界接收什么东西.不需要知道这些东西从哪里来

  • Vue3的7种种组件通信详情

    目录 1.Vue3 组件通信方式 2.Vue3 通信使用写法 2.1 props 2.2 $emit 2.3 expose / ref 2.4 attrs 2.5 v-model 2.6 provide / inject 2.7 Vuex 1.Vue3 组件通信方式 props $emit expose / ref $attrs v-model provide / inject Vuex 2.Vue3 通信使用写法 2.1 props 用 props 传数据给子组件有两种方法,如下 方法一:混合

  • Vue2.x中的父子组件相互通信的实现方法

    业务场景:(这里指的是直接父子级关系的通信) 美女(子组件)将消息发送给大群(父组件) 大群(父组件)收到美女发送的消息后再回个信息给美女(子组件) 父组件 template <template> <div> <p>群消息girl:</p> <div> {{ somebody }} 说: 我 {{ age }} 了. </div> <hr> <v-girl-group :girls="aGirls"

  • Vue3中的Refs和Ref详情

    小编同样和大家分享关于Vue3中的数据相应的问题,下面我们来例举一个这样的例子 Vue.createApp({ template: `<div>{{ nameObj.name }}</div>`, setup() { const { reactive } = Vue const nameObj = reactive({name:'lilei',age:18}) setTimeout(() => { nameObj.name = 'hanmeimei' },2000) retu

  • 一文搞懂Vue3中的异步组件defineAsyncComponentAPI的用法

    目录 前言 传递工厂函数作为参数 传递对象类型作为参数 总结 前言 当我们的项目达到一定的规模时,对于某些组件来说,我们并不希望一开始全部加载,而是需要的时候进行加载:这样的做得目的可以很好的提高用户体验. 为了实现这个功能,Vue3中为我们提供了一个方法,即defineAsyncComponent,这个方法可以传递两种类型的参数,分别是函数类型和对象类型,接下来我们分别学习. 传递工厂函数作为参数 defineAsyncComponent方法接收一个工厂函数是它的基本用法,这个工厂函数必须返回

随机推荐