1. Toy模板网首页
  2. > Toy博客

vue3组件通信详解

9月前 作者：Lora_0925 分类：Toy博客 阅读(36) 违法举报

这篇具有很好参考价值的文章主要介绍了vue3组件通信详解。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

vue3组件通信方式有以下几种：porps，$emit， bus，v-model，useAttrs，$ref/$parent，provide/inject，pinia，slot。下面将逐一讲解。

  

目录

1.porps：实现父子组件通信，子组件接收的数据还是只读 

2.$emit

3.全局事件总线 $bus，使用mitt

4.v-model传值

5. $attrs/useAttrs：获取组件标签身上属性与事件

6.$ref/$parent

7.provide/inject

8.pinia ：vuex：集中管理状态容器，可以实现任意组件之间的通信

9.slot 插槽分为默认插槽、具名插槽、作用域插槽（可以传递数据的插槽，子组件可以将数据回传给父组件的插槽）

 

1.porps：实现父子组件通信，子组件接收的数据还是只读

父组件中，引入子组件并给子组件绑定一个money参数

<template>
  <div id="app"> 
    <h1>父组件</h1>
    <h3>富一代资产{{ money }}元</h3>
    <index1 :money="money"></index1>
  </div>
</template>

<script lang="ts" setup>

  import index1 from './view/index.vue'
  import { ref } from 'vue'

  let money = ref(1000000000000)

</script>

<style scoped>
#app {
  width: 100vw;
  height: 100vh;
  color: #000;
  padding: 50px;
  box-sizing: border-box;
}
</style>

子组件中，使用defineProps接收，在template中，可以直接使用money，

<template>
  <div class="index1">
    <h1>子组件1</h1>
    <h3>儿子不知道父亲有{{ porps.money }}元</h3> 
     <h3>
      儿子知道了会争这{{ money }}元（template中可以直接省略porps---script中无法省略！）
    </h3>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  // porps:实现父子组件通信，props数据还是只读
  // 组合式api 使用 defineProps 接收父子组件传递过来的数据，可以是数组也可以是对象，
  //不需要引入  template中可直接使用
  const porps = defineProps(['money'])
  console.log(porps)
 
</script>

<style lang="scss" scoped>
.index1 {
  background-color: azure;
  padding: 12px;
}
</style>

示例

vue3组件通信详解

2.$emit

说到$emit就要说一下自定义事件，在vue框架中事件分为两种:一种是原生的DOM事件，另外一种自定义事件。原生DOM事件可以让用户与网页进行交互，比如click、dbdlick、change、mouseenter、mouseleave...自定义事件可以实现子组件给父组件传递数据。vue2中的@click绑定的是自定义事件 ,可以通过.native修饰符变为原生DOM事件 。vue3中绑定的是原生事件,利用defineEmits方法返回函数触发自定义事件，不需要引入，直接使用。

父组件

<template>
  <div id="app"> 
    <h1>父组件</h1>
    <h3>富一代资产{{ money }}元</h3>
    <index1 :money="money" @xxx="handlerXXX"></index1>
    <h3>{{ son }}</h3>    
  </div>
</template>

<script lang="ts" setup>

  import index1 from './view/index.vue'
  import { ref } from 'vue'

  let money = ref(1000000000000)
  let son = ref('')
  const handlerXXX = (value: string) => {
    son.value = value
  }

</script>

<style scoped>
#app {
  width: 100vw;
  height: 100vh;
  color: #000;
  padding: 50px;
  box-sizing: border-box;
}
</style>

子组件

<template>
  <div class="index1">
    <h1>子组件1</h1>
    <h3>儿子不知道父亲有{{ porps.money }}元</h3> 
     <h3>
      儿子知道了会争这{{ money }}元（template中可以直接省略porps---script中无法省略！）
    </h3>
    <p>
       vue2中 @click是自定义事件，可以通过.native修饰符变为原生DOM事件。
       在vue3中@click是原生DOM事件
     </p>
     <el-button @click="handlerClick">自定义事件</el-button>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  //------porps-------
  // porps:实现父子组件通信，props数据还是只读
  // 组合式api 使用 defineProps 接收父子组件传递过来的数据，可以是数组也可以是对象，
  //不需要引入  template中可直接使用
  const porps = defineProps(['money'])
  console.log(porps)

  //------$emit-------
  //defineEmits方法返回函数出发自定义事件，不需要引入 直接使用
  const $emit = defineEmits(['xxx'])
  const handlerClick = () => {
    console.log('触发自定义事件')
    $emit('xxx', '富二代上交9999元给富一代') 
  }
 
</script>

<style lang="scss" scoped>
.index1 {
  background-color: azure;
  padding: 12px;
}
</style>

 示例：

vue3组件通信详解

3.全局事件总线 $bus，使用mitt

Mitt是一个小巧的JavaScript发布-订阅库，用于在应用程序中实现事件监听和触发。

安装：npm install mitt -S

在src目录下新建bus文件夹，bus文件夹下新建index.ts

vue3组件通信详解

// 引入mitt插件  index.ts
import mitt from "mitt" 

const $bus = mitt();
export default $bus

 接收组件：引入上面新建的bus，$bus.on  接收将来兄弟组件传递的数据

<template>
  <div class="index1">
    <h1>子组件1</h1>
     <p>收到{{ car }}</p>
  </div>
</template>

<script setup lang="ts">
  import { ref ，onMounted} from 'vue' 

  // 事件总线 引入$bus
  import $bus from '@/bus'
 
  let car = ref('')
  // 组件挂载完毕后，当前组件绑定一个事件，接收将来兄弟组件传递的数据
  onMounted(() => {
    $bus.on('car', (value: string) => {
      car.value = value
    })
  })

</script>

<style lang="scss" scoped>
.index1 {
  background-color: azure;
  padding: 12px;
}
</style>

发送组件：$bus.emit 使用发送  

<template>
  <div class="index2">
    <h1>子组件2</h1>
    <h3>富二代的亲弟钱包有999999元</h3>
    <el-button @click="handler">点击送富二代哥哥法拉利跑车一台</el-button>
  </div>
</template>
<script setup lang="ts">
import $bus from '@/bus'

const handler = () => {
  $bus.emit('car', '弟弟送哥哥的法拉利跑车一台')
}
</script>
<style lang="scss" scoped>
.index2 {
  background-color: antiquewhite;
  padding: 12px;
  margin: 12px 0;
}
</style>

示例：

vue3组件通信详解

4.v-model传值

在vue2中v-model绑定了一个value值，和input事件，并且只能绑定一个v-model。

而在vue3中给子组件传递一个porps，并且绑定了一个自定义事件。

此处有两种用法，方法一 

 porps + @update:money 代表自定义事件。代码如下：

 父组件代码：

<template>
  <div id="app">
    <h1>父组件</h1>
     <!--  porps @update:money代表自定义事件，也可以换成其他名字  -->
     <!-- v-model
      1.相当于子子组件传递props[modelValue]      
      2.相当于给子组件绑定了自定义事件update:modelValue
     -->
    <index3 :modelValue="money" @update:modelValue="handleMoney"></index3> 
    <h3>父亲60大寿三妹送出价值{{ money3 }}元礼品</h3>
 </div>
</template>
<script lang="ts" setup>
  import index3 from './view/index3.vue'
  import { ref } from 'vue'
  // 接收子组件传递的数据
  let money3 = ref(666666)
   const handleMoney = (value: number) => {
     console.log('接收改变的值：' + value)
     money3.value = value
   }
</script>

<style scoped>
#app {
  width: 100vw;
  height: 100vh;
  color: #000;
  padding: 50px;
  box-sizing: border-box;
}
</style>

子组件

<template>
  <div class="index3">
    <h1>子组件3</h1>
    <h3>父亲送给三妹 {{ modelValue }}元</h3>
    <el-button @click="send">点击送出</el-button>
  </div>
</template>
<script setup lang="ts">
  // v-module ：收集表单数据，数据双向绑定，组件之间的通信去实现父子数据同步业务

  defineProps(['modelValue'])
  let $emit = defineEmits(['update:modelValue'])

  const send = () => { 
    $emit('update:modelValue', 9999)
  }
 
</script>
<style lang="scss" scoped>
.index3 {
  background-color: beige;
  padding: 12px;
}
</style>

vue3组件通信详解

 方法二

1.相当于给子组件传递一个porps[modelValue]=666666 （一定叫modelValue）

2.相当于给子组件绑定了一个自定义事件，事件名一定是 update:modelValue，父组件不用自己写自定义事件

父组件代码

<template>
  <div id="app">
    <h1>父组件</h1>
    <!-- v-model使用情况：1.相当于给子组件传递一个porps[modelValue]=100000 （一定叫modelValue）
      2.相当于给子组件绑定了一个自定义事件，事件名一定是 update:modelValue 
    与vue2的v-model的区别在于，vue2的v-model绑定了一个value值，和input事件，👎 vue2中只能绑定一个v-model,而vue3 可以绑定多个v-model
    -->
     <index3 v-model="money3" v-model:name="name" v-model:age="age"></index3>
    <h3>父亲60大寿三妹送出价值{{ money3 }}元礼品</h3>
 </div>
</template>
<script lang="ts" setup>
  import index3 from './view/index3.vue'
  import { ref } from 'vue' 
  let money3 = ref(666666)
  let name = ref('嘉达')
  let age = ref(20)
  
</script>

<style scoped>
#app {
  width: 100vw;
  height: 100vh;
  color: #000;
  padding: 50px;
  box-sizing: border-box;
}
</style>

子组件：

注意：以v-model="money3"的形式传递时，使用defineProps 接收名字只能叫modelValue，默认写法。

传多个值时，父组件 以v-model:参数名="参数名" 形式传递，defineProps 接收名字就是参数名。

更改数据使用defineEmits，默认方式更改值 事件名字只能叫 “update:modelValue”，

更改指定名字的值时 事件名字 是 “update:参数名”

<template>
  <div class="index3">
    <h1>子组件3</h1>
    <h3>父亲送给三妹 {{ modelValue }}元</h3>
    <h3>名字：{{ name }}</h3>
    <h3>年龄：{{ age }}</h3>
    <el-button @click="send">点击送出</el-button>
    <el-button @click="changeName">点击更改名字和年龄</el-button>
  </div>
</template>
<script setup lang="ts">
// v-module ：收集表单数据，数据双向绑定，组件之间的通信去实现父子数据同步业务
defineProps(['modelValue', 'name', 'age'])
let $emit = defineEmits(['update:modelValue', 'update:name', 'update:age'])
const send = () => {
  $emit('update:modelValue', 9999)
}
const changeName = () => {
  $emit('update:name', '翠花')
  $emit('update:age', 18)
}
</script>
<style lang="scss" scoped>
.index3 {
  background-color: beige;
  padding: 12px;
}
</style>

 vue3组件通信详解

5. $attrs/useAttrs：获取组件标签身上属性与事件

父组件

<template>
  <div id="app">
    <h1>父组件</h1>
    <index4 type="primary" size="large" @click="handlerIndex4"></index4>
      
 </div>
</template>
<script lang="ts" setup>
  import index4 from './view/index4.vue'
  import { ref } from 'vue' 
  // useAttrs
  let handlerIndex4Value = ref('')

  const handlerIndex4 = (value: string) => {
    handlerIndex4Value.value = value
  }
  
</script>

<style scoped>
#app {
  width: 100vw;
  height: 100vh;
  color: #000;
  padding: 50px;
  box-sizing: border-box;
}
</style>

子组件： 

在 <script setup> 使用  attrs 的情况应该是相对来说较为罕见的，因为可以在模板中直接通过 $attrs 来访问。在你的确需要使用它们的罕见场景中，可以 useAttrs  辅助函数。

 porps和useAttrs都可以接收来自父组件传递过来的属性与属性值， 如果同时用porps接收值 ，那么useAttrs方法就无法再次获取，porps优先级高与useAttrs。  useAttr同时可以接收事件。

<template>
  <div class="index4">
    <h1>子组件4</h1>
    <el-button type="primary" :="$attrs">
      useAttrs通信 :="$attrs"等价于 v-bind:{type:'primary' , size:'large' }
    </el-button>
  </div>
</template>
<script setup lang="ts">
  // 引入useAttrs方法：获取组件标签身上属性与事件
  import { useAttrs } from 'vue'
  // 此方法会返回一个对象
  let $attrs:any = useAttrs()
 
  // console.log($attrs)
 
  // 获取身上的事件
  $attrs.onClick('接收事件回调参数')
</script>
<style lang="scss" scoped>
.index4 {
  background-color: rgb(240, 177, 246);
  padding: 12px;
  margin: 12px 0;
}
</style>

示例 

vue3组件通信详解

6.$ref/$parent

ref：可以获取真实的DOM节点，可以获取子组件实例的VC

$parent:可以在子组件内部获取到父组件的实例

组件内部的数据对外是关闭的，不能直接访问。需要使用defineExpose对外暴露

<template>
  <div id="app">
    <h1>父组件</h1>
    <el-button @click="borrow" style="margin: 12px 0">
      父亲找5儿子借1元
    </el-button>
    <h3>父亲资产{{ money }}元</h3>
    <index5 ref="son5"></index5>
 </div>
</template>
<script lang="ts" setup>
  import index5 from './view/index5.vue'
  import { ref } from 'vue' 
  let money = ref(1000000000000)

  // $ref
  let son5 = ref() //此处必须与组件绑定的ref名字相同

  // 借钱方法=> 父亲找儿子借钱，儿子的钱变少，父亲的钱变多 使用$ref 获取子组件数据
  const borrow = () => {
    money.value++
    // 获取数据
    son5.value.money--
    // 随后5儿子买包送人 --调用方法
    son5.value.buy()
  }
  defineExpose({ money })
</script>

<style scoped>
#app {
  width: 100vw;
  height: 100vh;
  color: #000;
  padding: 50px;
  box-sizing: border-box;
}
</style>

子组件

<template>
  <div class="index5">
    <h1>子组件5</h1>
    <h3>ref：可以获取真实的DOM节点，可以获取子组件实例的VC</h3>
    <h3>$parent:可以在子组件内部获取到父组件的实例</h3>
    <h3>儿子剩余{{ money }}元</h3>

    <el-button @click="borrowMoney($parent)">
      投资买楼资金不足，找爸爸要90000000（点击按钮注入$parent）
    </el-button>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
let money = ref(88888888)

// 买包
const buy = () => {
  money.value = money.value - 15862
}
// 找老爸要钱
const borrowMoney = ($parent: any) => {
  console.log($parent)
  // 获取父组件数据
  $parent.money = $parent.money - 90000000
  money.value = money.value + 90000000
}
// 组件内部的数据对外是关闭的，不能直接访问。需要使用defineExpose对外暴露
defineExpose({ money, buy })
</script>
<style lang="scss" scoped>
.index5 {
  background-color: rgb(226, 226, 226);
  padding: 12px;
}
</style>

示例

vue3组件通信详解

vue3组件通信详解

7.provide/inject

  1. vue3提供 provide （提供）与 inject （注入），事件隔辈组件数据传递。

  2. 父组件提供数据（provide）需要两个参数：
    第一个参数就是提供数据的key
    第二个参数是提供的数据

  3. 注入祖先组件提供的数据：提供的key

  4. inject获取的数据是指向同一个对象，可以进行修改

<template>
  <div id="app">
    <h1>父组件</h1>
     <index6></index6>
 </div>
</template>
<script lang="ts" setup>
 import index6 from './view/index6.vue'
 import { provide } from 'vue'
 // provide与inject
 provide('gold', 5678)
</script>

<style scoped>
#app {
  width: 100vw;
  height: 100vh;
  color: #000;
  padding: 50px;
  box-sizing: border-box;
}
</style>

子组件

<template>
  <div class="index6">
    <h1>子组件6</h1>
    <index6_1></index6_1>
  </div>
</template>
<script setup lang="ts">
import index6_1 from './index6_1.vue'
</script>
<style lang="scss" scoped>
.index6 {
  background-color: rgb(234, 139, 255);
  padding: 12px;
  margin: 12px 0;
}
</style>

孙子组件

<template>
  <div class="index6_1">
    <h2>孙子组件</h2>
    <h3>收到爷爷送的黄金{{ gold }}g</h3>
  </div>
</template>
<script setup lang="ts">
import { inject } from 'vue'
let gold = inject('gold')
console.log(gold)
</script>
<style lang="scss" scoped>
.index6_1 {
  background-color: rgb(233, 229, 114);
  padding: 12px;
}
</style>

示例 

vue3组件通信详解

8.pinia ：vuex：集中管理状态容器，可以实现任意组件之间的通信

   Pinia | Pinia官网

 核心概念 state mutations actions getters modules

 pinia 核心概念 state actions getters

 pinia分为两种写法，选择式api 写法=>类似与vuex 和组合式api写法

8.1.安装

yarn add pinia
# 或者使用 npm
npm install pinia

8.2.新建store文件夹，如下,分为两个模块讲解 选择式api写法 与 组合式api写法

vue3组件通信详解

8.3.index.ts 

// 创建大仓库 index.ts
import { createPinia } from 'pinia'

// createPinia
let store =createPinia();
// 对外暴露
export default store

8.4.main.js  : 引入 "./store"

import { createApp } from 'vue'
import App from "@/App.vue"
import "@/assets/style/common.scss"
 
import store from "./store"
 
const app = createApp(App)
 
app.use(store)

app.mount('#app')

8.5.user.ts 选择式api写法

// 定义user仓库  选择式api写法   user.ts
import { defineStore } from "pinia";

// defineStore传入两个参数 第一个是小仓库的名字，第二个是小仓库配置对象。
// defineStore方法执行会返回一个函数，函数作用就是让组件可以获取到仓库的数据
let userStore = defineStore("user", {
    //  存储数据：state
    state: () => {
        return {
            name: "梅赛德斯",
            arr: [12, 234, 23434, 34534]
        }
    },
    actions: {
        // 注意函数没有context上下文对象,没有commit 没有mutation去修改数据 
        // 此处使用this就是小仓库对象--- 此处不能使用箭头函数
        updateName(value: string) {
            this.name = value
        }
    },
    getters: {
        totalMoney() {
            let M: any = this.arr.reduce((prev: number, next: number) => {
                return prev + next
            }, 0)
            return M
        }

    }
})

export default userStore

 8.6.info.ts 组合式api写法

// 定义info仓库  组合式api写法 info.ts
import { defineStore } from "pinia";
import { ref, computed } from "vue"

let infoStore = defineStore("info", () => {
    // 此处的箭头函数务必返回一个对象，属性与方法提供给组件使用
    // 主要用到了vue3中的组合式API函数
    let num = ref(34233)
    const updateNum = (value: number) => {
        num.value = value
    }
    // 使用计算属性
    const newNum = computed(() => {
        return num.value * 1000
    })
    return {
        num,
        newNum,
        updateNum
    }
})
export default infoStore

使用：

<template>
  <div class="index7">
    <h1>子组件7</h1>
    <h3>名字：{{ userInfo.name }}</h3>
    <h3>{{ userInfo.totalMoney }}</h3>
    <h4>组合式api：{{ info.num }}</h4>
    <h4>组合式api使用计算属性:{{ info.newNum }}</h4>
    <el-button @click="changeName">点击改名字</el-button>
    <el-button @click="changeInfo">点击改num</el-button>
  </div>
</template>
<script setup lang="ts">
import userStore from '@/store/modules/user' 
import infoStore from '@/store/modules/info'
//   vuex：集中管理状态容器，可以实现任意组件之间的通信
// 核心概念 state mutations actions getters modules
// pinia 核心概念 state actions getters
// pinia分为两种写法，选择式api 写法=>类似与vuex 和组合式api写法

let userInfo = userStore()

const changeName = () => {
  userInfo.updateName('库里南')
}

// 获取
let info = infoStore()
console.log(info)

const changeInfo = () => {
  info.updateNum(77777)
}
</script>
<style lang="scss" scoped>
.index7 {
  background-color: rgb(115, 244, 175);
  padding: 12px;
  margin: 12px 0;
}
</style>

示例

vue3组件通信详解

9.slot 插槽分为默认插槽、具名插槽、作用域插槽（可以传递数据的插槽，子组件可以将数据回传给父组件的插槽）

9.1 默认插槽 -父组件

<template>
  <div id="app">
    <h1>父组件</h1>
    <index8 >
      <div>1.我是默认插槽</div>       
    </index8>
 </div>
</template>

<script lang="ts" setup>

import index8 from './view/index8.vue'
 
</script>

子组件

<template>
  <div class="index8">
    <h1>子组件8</h1>
    <!-- 默认插槽 -->
     <slot></slot>     
  </div>
</template>
<script setup lang="ts">
 
</script>
 
</style>

vue3组件通信详解

 9.2 具名插槽 -父组件

<template>
  <div id="app">
    <h1>父组件</h1>
    <index8 >
      <template v-slot:lora>
        <div> 我是具名插槽数据lora</div>
      </template>
      <!-- 具名插槽可简化为# -->
      <template #Marry>
        <div> 我是具名插槽数据Marry</div>
      </template>   
    </index8>
 </div>
</template>

<script lang="ts" setup>

import index8 from './view/index8.vue'
 
</script>

子组件

<template>
  <div class="index8">
    <h1>子组件8</h1>
    <!-- 默认插槽 -->
    <slot name="lora"></slot>
    <p>-------</p>
    <slot name="Marry"></slot>
    <p>-------</p>
  </div>
</template>
<script setup lang="ts">
 
</script>
 
</style>

vue3组件通信详解

  9.3 作用域插槽 -父组件

<template>
  <div id="app">
    <h1>父组件</h1>
    <index8 :slotList="slotList">
      <template v-slot="{ $row, $index }">
        <span>
          {{ $row.type === 1 ? $row.name : $row.lable }}
          index:{{ $index }}
        </span>
      </template>  
    </index8>
 </div>
</template>

<script lang="ts" setup>

import index8 from './view/index8.vue'

let slotList = [
  {
    id: 1,
    lable: '欧坤',
    name: '欧坤name',
    type: 1,
  },
  {
    id: 2,
    lable: '欧坤东方',
    type: 0,
  },
  {
    id: 4,
    lable: '欧坤西南',
    type: 0,
  },
]
 
</script>

子组件

<template>
  <div class="index8">
    <h1>子组件8</h1>
    <div>
      <div v-for="(item, index) in slotList" :key="item.id">
        <slot :$row="item" :$index="index"></slot>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
 defineProps(['slotList'])
</script>
 
</style>

示例 

vue3组件通信详解

以上是总结的所有通信方式 文章来源地址https://www.toymoban.com/news/detail-470086.html

到了这里，关于vue3组件通信详解的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • Vue3 组件之间的通信

    Vue3 组件之间的通信

    经过前面几章的阅读，相信开发者已经可以搭建一个基础的 Vue 3 项目了！ 但实际业务开发过程中，还会遇到一些组件之间的通信问题，父子组件通信、兄弟组件通信、爷孙组件通信，还有一些全局通信的场景。 这一章就按使用场景来划分对应的章节吧，在什么场景下遇到问

    2023年04月08日
    浏览(43)

  • Vue3组件通信相关内容整理

    适用于：  父向子传递参数、方法， 子触发父传递的方法 props方式组件通信和vue2中的props传参类似，只是使用方式和接收方式有一些区别。 注意点： 通过props方式传递的参数为 只读属性，不可修改 父组件 子组件  组件A ：绑定事件-接收数据  组件B：触发事件-传递数据 这

    2024年01月25日
    浏览(40)
  • vue3组件通信之pinia

    vue3组件通信之pinia

      在vue3，vue的状态管理也迎来了新的变更，在vue3使用新的组件pinia来代理原有的vuex。pinia相比vuex，功能收敛了不少，比如不直接暴露setter方式，外部直接修改数据 vuex:集中式管理状态容器,可以实现任意组件之间通信 核心概念:state、mutations、actions、getters、modules pinia:集中式

    2024年02月11日
    浏览(40)
  • vue3 快速入门系列 —— 组件通信

    vue3 快速入门系列 —— 组件通信

    组件通信在开发中非常重要，通信就是你给我一点东西，我给你一点东西。 本篇将分析 vue3 中组件间的通信方式。 Tip ：下文提到的绝大多数通信方式在 vue2 中都有，但是在写法上有一些差异。 在 vue3 基础上进行。 新建三个组件：爷爷、父亲、孩子A、孩子B，在主页 Home.vu

    2024年04月17日
    浏览(62)
  • 【vue3】学习笔记--组件通信方式

    【vue3】学习笔记--组件通信方式

    学习vue3总是绕不开vue2 vue3组件通信方式如下： props数据只读，从父组件传递到子组件，子组件内部不可直接更改 子组件需要使用defineProps方法接受父组件传递过来的数据 setup语法糖下局部组件无需注册直接可以使用 父组件 子组件 vue框架中事件分为两种：原生的DOM事件和自定

    2024年02月13日
    浏览(48)
  • Vue3组件间的通信方式

    Vue3组件间的通信方式

    目录  1.props父向子组件通信 2.自定义事件 子向父组件通信 3.全局事件总线 4.v-model组件通信（父子组件数据同步） 绑定单个数据同步  绑定多个数据同步  5.useAttrs组件通信  6.ref与$parent ref获取子组件实例对象  $parent获取父组件实例对象  7.provide-inject 可以实现隔辈传输 8.

    2024年02月17日
    浏览(43)

  • VUE3+TS（父子、兄弟组件通信）

    目录 父传子值、方法（子调用父值、方法） 子传父值（父调用子值） 父读子（子传父）（父调用子值、方法） 兄弟（任意组件）通信 引入Mitt来完成任意组件通信 1、统一规范写法，通过在子组件标签上绑定属性和值，来传递到子组件，子组件再通过defineProps来接收，先给其

    2023年04月08日
    浏览(47)

  • vue3探索——组件通信之事件总线

    Vue2.x使用EventBus进行组件通信，而Vue3.x推荐使用 mitt.js 。 比起Vue实例上的 EventBus ， mitt.js 好在哪里呢？首先它足够小，仅有200bytes，其次支持全部事件的监听和批量移除，它还不依赖Vue实例，所以可以跨框架使用，React或者Vue，甚至jQuery项目都能使用同一套库。 使用yarn安装

    2024年02月12日
    浏览(44)
  • vue3探索——组件通信之依赖注入

    vue3探索——组件通信之依赖注入

    通常情况下，当我们需要从父组件向子组件传递数据时，会使用  props 。想象一下这样的结构：有一些多层级嵌套的组件，形成了一颗巨大的组件树，而某个深层的子组件需要一个较远的祖先组件中的部分数据。在这种情况下，如果仅使用 props 则必须将其沿着组件链逐级传递

    2024年02月10日
    浏览(40)

  • vue3 常用的组件互相通信(父子、兄弟、爷孙、任意组件)

    目录 前言：目前组件通信方法有好多种，我这挑选一部分来讲 1、父传子 2、子传父 3、兄弟之间通信 3.1、父组件充当中间件 3.2、全局事件总线—EventBus 4、爷孙之间通信 5、任意组件、全局 方案 父传子 子传父 props / emits props emits v-model / emits v-model emits ref / emits ref emits provi

    2024年02月15日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包