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

vue3组件通信学习笔记

10月前 作者：开心就好1314520 分类：Toy博客 阅读(44) 违法举报

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

1、Prop

父组件

<template>
    <div class="parent">
        <h1>我是父元素</h1>
        <Child :msg="msg"></Child>
    </div>
</template>

<script setup>
import Child from './Child.vue'
let msg = ref('我是父组件的数据')
</script>

<style scoped>
.parent{
    width: 800px;
    height: 600px;
    background: skyblue;
}
</style>

子组件

<template>
    <div class="son">
        <h3>我是子元素</h3>
        <h4>{{ msg }}</h4>
    </div>
</template>

<script setup>
// 1、let props = defineProps(['msg'])
//2、defineProps(['msg'])
//3、
defineProps({
    msg:{
        type:String,
        default:'默认数据'
    }
})
</script>

<style scoped>
.son{
    width: 200px;
    height: 200px;
    background: pink;
}
</style>

vue3组件通信学习笔记,学习,笔记,javascript

2、自定义事件

父组件

<template>
    <div class="parent">
        <h1>我是父元素</h1>
        <Child :msg="msg" @getData="getData"></Child>
        <hr>
        <p>父组件接收数据：{{passStr}}</p>
    </div>
</template>

<script setup>
import Child from './Child.vue'
let msg = ref('我是父组件的数据');
let passStr = ref('')
const getData = (e)=>{
    passStr.value=e
}
</script>

<style scoped>
.parent{
    width: 800px;
    height: 600px;
    background: skyblue;
}
</style>

子组件

<template>
    <div class="son">
        <h3>我是子元素</h3>
        <h4>{{ msg }}</h4>
        <button @click="passData('我是子组件数据')">给父组件传递参数</button>
    </div>
</template>

<script setup>
// 1、let props = defineProps(['msg'])
//2、defineProps(['msg'])
//3、
defineProps({
    msg:{
        type:String,
        default:'默认数据'
    }
})
let $emit = defineEmits('getData')
const passData = (msg)=>{
    $emit('getData',msg)
}
</script>

<style scoped>
.son{
    width: 200px;
    height: 200px;
    background: pink;
}
</style>

vue3组件通信学习笔记,学习,笔记,javascript

3、全局事件总线

1、安装

npm install --save mitt

2、新建utils/mitt.js

import mitt from 'mitt'
 
const emitter =new mitt()

export default emitter

3、使用

子组件1

<template>
    <div class="son">
        <h3>我是子元素</h3>
        <h4>{{ msg }}</h4>
        <button @click="passData('我是子组件数据')">给父组件传递参数</button>
        <button @click="passBusData('我是子组件1的数据')">给子组件2传递参数</button>
    </div>
</template>

<script setup>
import emitter from '../utils/mitt'
// 1、let props = defineProps(['msg'])
//2、defineProps(['msg'])
//3、
defineProps({
    msg:{
        type:String,
        default:'默认数据'
    }
})
let $emit = defineEmits('getData')
const passData = (msg)=>{
    $emit('getData',msg)
}
const instance = getCurrentInstance()
const passBusData = (msg) =>{
    emitter.emit("passBusData",msg)
}
</script>

<style scoped>
.son{
    width: 200px;
    height: 200px;
    background: pink;
}
</style>

子组件2

<template>
    <div class="child1">
        <h3>子组件2</h3>
        <p>{{msg}}</p>
    </div>
</template>

<script setup>
import emitter from '../utils/mitt'
let msg = ref('')
onMounted(() => {
  
    emitter.on("passBusData",(data) =>{
        msg.value=data
    })
});
</script>

<style  scoped>
.child1{
    width: 200px;
    height: 200px;
    background: hotpink;
}
</style>

vue3组件通信学习笔记,学习,笔记,javascript

4、v-model

1、绑定单个数据

父组件

<template>
    <div class="parent">
        <h1>父组件钱数：{{money}}</h1>
        <input type="number" v-model="money">
        <!-- props:父组件给子组件传值 -->
        <!-- <Child :modelValue="money" @update:modelValue="getData" /> -->
        <!-- 
            v-model组件身上使用
            1、相当于给子组件传递props[modelValue] = 1000
            2、给子组件绑定自定义事件update:modelValue
         -->
        <Child v-model="money" />
    </div>
</template>

<script setup>
import Child from './Child.vue';
import { ref } from 'vue';
// v-model 指令 收集表单数据，双向数据绑定
// v-model也可以实现组件之间通信，实现父子组件数据同步
// 父组件给子组件传数据 props
// 子组件给父组件传数据 自定义事件
let money = ref(1000);
const getData = (data)=>{
    money.value = data
}
</script>

<style lang="scss" scoped>
.parent{
    width:800px;
    height:500px;
    background: pink;
}
</style>

子组件

<template>
    <div class="child">
        <h3>子组件接收父组件钱数{{modelValue}}</h3>
        <button @click="handler">子组件改变数据</button>

    </div>
</template>

<script setup>
let props = defineProps(['modelValue']);
let emits = defineEmits(['update:modelValue']);
const handler = () => {
    emits('update:modelValue',props.modelValue+100)
}
</script>

<style lang="scss" scoped>
.child{
    width: 300px;
    height: 200px;
    background: skyblue;
}
</style>

vue3组件通信学习笔记,学习,笔记,javascript

2、绑定多个数据

父组件

<template>
    <div class="parent">
        <h2>父组件钱数：{{money}}当前页{{currentPage}}每页条数{{pageSize}}</h2>
        <input type="number" v-model="money">
        <!-- props:父组件给子组件传值 -->
        <!-- <Child :modelValue="money" @update:modelValue="getData" /> -->
        <!-- 
            v-model组件身上使用
            1、相当于给子组件传递props[modelValue] = 1000
            2、给子组件绑定自定义事件update:modelValue
         -->
        <Child v-model="money" />
        <Child2 v-model:currentPage="currentPage" v-model:pageSize="pageSize"></Child2>
    </div>
</template>

<script setup>
import Child from './Child.vue';
import Child2 from './Child2.vue';
import { ref } from 'vue';
// v-model 指令 收集表单数据，双向数据绑定
// v-model也可以实现组件之间通信，实现父子组件数据同步
// 父组件给子组件传数据 props
// 子组件给父组件传数据 自定义事件
let money = ref(1000);
const getData = (data)=>{
    money.value = data
}
//
let currentPage =ref(1)
let pageSize =ref(20)
</script>

<style lang="scss" scoped>
.parent{
    width:800px;
    height:600px;
    background: pink;
}
</style>

子组件

<template>
    <div class="child2">
        <h3>子组件2接收父组传递的数据{{currentPage}}{{ pageSize }}</h3>
        <button @click="emits('update:currentPage',currentPage+1)">改变父组件currentPage</button>
        <button @click="emits('update:pageSize',pageSize+10)">改变父组件pageSize</button>
    </div>
</template>

<script setup>
let props=defineProps(['currentPage','pageSize'])
let emits= defineEmits(['update:currentPage','update:pageSize'])
</script>

<style lang="scss" scoped>
.child2{
    width:300px;
    height:200px;
    background: hotpink;
}
</style>

vue3组件通信学习笔记,学习,笔记,javascript

5、useAttr

父组件

<template>
    <div class="parent">
        <h2>父组件</h2>
        <Child type="primary" title="编辑按钮" size="small" @click="handler" />
    </div>
</template>

<script setup>
import Child from './Child.vue';
const handler = ()=>{
    alert('点击了')
}
</script>

<style lang="scss" scoped>
.parent{
    width:800px;
    height:600px;
    background: pink;
}
</style>

子组件

<template>
    <div class="child">
        <h3>子组件</h3>
        <!-- <el-button :type="$attrs.type" :size="$attrs.size">按钮</el-button> -->
        <el-button :="$attrs">按钮</el-button>
    </div>
</template>

<script setup>
//引入useAttrs方法：获取组件标签身上属性与事件
let $attrs = useAttrs()

let props= defineProps(['title'])
console.log(props)
console.log($attrs)
//props和useAttrs方法都可以获取父组件传过来的属性和属性值
//但是props接收了useAttrs方法就获取不到了
</script>

<style lang="scss" scoped>
.child{
    width: 300px;
    height: 200px;
    background: skyblue;
}
</style>

vue3组件通信学习笔记,学习,笔记,javascript

6、ref与$parent

父组件

<template>
    <div class="parent">
        <h2>父组件钱数：{{money}}</h2>
        <button @click="borrowMoney">向子组件借100</button>
        <Child ref="child" />
    </div>
</template>

<script setup>
import Child from './Child.vue';
// ref可以获取真实的DOM节点，可以获取到组件真实VC
//$parent 可以在子组件内部获取父组件的实例
let money = ref(1000)

//向外暴露
defineExpose({
    money
})
//获取子组件实例
let child = ref();

//借钱
let borrowMoney = ()=>{
    money.value+=100;
    child.value.money-=100;
    //child.value.handler()
}
</script>

<style lang="scss" scoped>
.parent{
    width:800px;
    height:600px;
    background: pink;
}
</style>

子组件

<template>
    <div class="child">
        <h3>子组件钱数：{{money}}</h3>
        <button @click="handler($parent)">向父组件借钱100</button>
    </div>
</template>

<script setup>
let money = ref(1000)
//组件内部的数据是对外关闭的，别人不能访问
//如果想让外部访问需要通过defineExpose方法对外暴露
let handler = ($parent)=>{
    console.log('子组件事件');
    money.value+=100;
    $parent.money-=100
}
defineExpose({
    money,handler
})
</script>

<style lang="scss" scoped>
.child{
    width: 300px;
    height: 200px;
    background: skyblue;
}
</style>

vue3组件通信学习笔记,学习,笔记,javascript

7、Provide与Inject

父组件

<template>
    <div class="parent">
        <h2>父组件数据：{{car}}</h2>
        
        <Child ref="child" />
    </div>
</template>

<script setup>
import Child from './Child.vue';
//vue3提供provide(提供)与inject(注入)可以实现隔辈组件传递数据
let car = ref('法拉利');
//祖先组件给后代组件传递数据
//两个参数，第一个参数是提供数据的数据key
//第二个参数 祖先组件提供的数据
provide('car', car);
</script>

<style lang="scss" scoped>
.parent{
    width:800px;
    height:600px;
    background: pink;
}
</style>

子组件

<template>
    <div class="child">
        <h3>子组件</h3>
        <Grandson></Grandson>
    </div>
</template>

<script setup>
import Grandson from './Grandson.vue';
</script>

<style lang="scss" scoped>
.child{
    width: 300px;
    height: 200px;
    background: skyblue;
}
</style>

孙子组件

<template>
    <div class="grandson">
        <h5>孙子组件接收祖先组件传递的数据：{{car}}</h5>
        <button @click="updateData">更改祖先组件数据</button>
    </div>
</template>

<script setup>
//注入祖先组件提供的数据
//需要参数：即为祖先组件提供数据的key
let car = inject("car");
let updateData = ()=>{
    car.value='宝马'
}
</script>

<style lang="scss" scoped>
.grandson{
    width:200px;
    height: 100px;
    background: yellowgreen;
}
</style>

vue3组件通信学习笔记,学习,笔记,javascript

8、pinia

1、安装

pnpm i pinia

2、在src文件夹下创建store文件夹，新建index.js

//创建大仓库
import { createPinia } from 'pinia';
//createPinia方法可以用来创建大仓库
let store = createPinia();
//对外暴露，安装仓库
export default store

3、在main.js中引入使用

//引入仓库
import store from './store'
let app= createApp(App);

app.use(store).mount('#app')

4、在store文件夹下新建modules文件夹，新建info.js

1、选择式写法

1、info.js
//定义info小仓库
import { defineStore } from "pinia";

//2个参数：1、小仓库名称 2小仓库配置对象
//defineStore方法执行返回一个函数，函数作用让组件获取到仓库数据
let useInfoStore = defineStore("info",{
    //存储数据 state
    state: ()=>{
        return {
            count:99,
            arr:[1,2,3,4,5,6,7,8,9,10]
        }
    },
    actions:{
        updateCount(num){
           // this.count++
           this.count+=num;
        }
    },
    getters:{
        total(){
            return this.arr.reduce((pre,next)=>{
                return pre+next
            },0)
        }
    }
})

//对外暴露
export default useInfoStore;
2、在组件1中使用
<template>
    <div class="child">
        <h3>子组件-接收仓库数据：{{infoStore.count}}</h3>
        <h4>getters:数组求和：{{infoStore.total}}</h4>
        <button @click="updateCount">修改仓库数据</button>
    </div>
</template>

<script setup>
import useInfoStore from '../store/modules/info';
//获取小仓库对象
let infoStore = useInfoStore();
console.log(infoStore)
//修改仓库数据
let updateCount = ()=>{
    //1、直接修改
    //infoStore.count++
    //2、patch
    // infoStore.$patch({
    //     count:100
    // })
    //3、调用store方法
    infoStore.updateCount(10)
}
</script>

<style lang="scss" scoped>
.child{
    width: 300px;
    height: 200px;
    background: skyblue;
}
</style>
3、在组件2中使用
<template>
    <div class="child2">
        <h3>子组件2-接收仓库数据：{{infoStore.count}}</h3>
       
    </div>
</template>

<script setup>
import useInfoStore from '../store/modules/info';
//获取小仓库对象
let infoStore = useInfoStore();

</script>

<style lang="scss" scoped>
.child2{
    width:300px;
    height:200px;
    background: hotpink;
}
</style>

vue3组件通信学习笔记,学习,笔记,javascript

2、组合式API写法

1、在modules文件夹下新建todo.js
//定义组合式API
import { defineStore } from "pinia";
import { ref , computed } from 'vue'
//创建小仓库
let useTodoStore = defineStore('todo',()=>{

    //务必返回一个对象，对象的属性和方法提供给组件使用
    let todos = ref([
        {id:1,title:'吃饭'},
        {id:2,title:'睡觉'},
        {id:3,title:'打豆豆'},
    ])
    let arr=ref([1,2,3,4,5])
    const total = computed(()=>{
        return arr.value.reduce((prev, curr) => {
                return prev+curr
        }, 0)
    })
   return {
        todos,//相当于选择式API的state
        arr,
        total,
        updateTodos(){
            todos.value.push({id:4,title:'摆烂'})
        },//相当于选择式API的actions
   }

})

export default useTodoStore
2、在组件1中使用
<template>
    <div class="child">
        <h3>子组件-接收仓库数据：</h3>
        <ul>
            <li v-for="item in todosStore.todos" :key="item.id">{{item.title}}</li>
        </ul>
        <p>{{ todosStore.arr }}--总和{{todosStore.total}}</p>
        <button @click="updateTodos">修改仓库数据</button>
    </div>
</template>

<script setup>
//引入组合式API函数仓库
import useTodosStore from '../store/modules/todo';
let todosStore = useTodosStore();
//修改仓库数据
let updateTodos = ()=>{
    todosStore.updateTodos()
}
</script>

<style lang="scss" scoped>
.child{
    width: 300px;
    height: 300px;
    background: skyblue;
}
</style>
3、在组件2中使用
<template>
    <div class="child2">
        <h3>子组件2-接收仓库数据：</h3>
        <ul>
            <li v-for="item in todosStore.todos" :key="item.id">{{item.title}}</li>
        </ul>
    </div>
</template>

<script setup>
import useTodosStore from '../store/modules/todo';
//获取小仓库对象
let todosStore = useTodosStore();

</script>

<style lang="scss" scoped>
.child2{
    width:300px;
    height:300px;
    background: hotpink;
}
</style>

vue3组件通信学习笔记,学习,笔记,javascript

9、slot

1、默认插槽

父组件

<template>
    <div class="parent">
        <h2>父组件</h2>
        <div class="container">
            <Child>
                <pre>我是父组件传入的数据</pre>
            </Child>
        </div>
       
    </div>
</template>

<script setup>
import Child from './Child.vue';
//插槽：默认插槽、具名插槽、作用域插槽
</script>

<style lang="scss" scoped>
.parent{
    width:800px;
    height:400px;
    background: pink;
    .container{
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
}
</style>

子组件

<template>
    <div class="child">
        <h3>我是子组件默认插槽</h3>
        <!-- 默认插销 -->
        <slot></slot>
        <h3>我是子组件默认插槽</h3>
       
    </div>
</template>

<script setup>
//引入组合式API函数仓库
import useTodosStore from '../store/modules/todo';
let todosStore = useTodosStore();
//修改仓库数据
let updateTodos = ()=>{
    todosStore.updateTodos()
}
</script>

<style lang="scss" scoped>
.child{
    width: 300px;
    height: 300px;
    background: skyblue;
}
</style>

vue3组件通信学习笔记,学习,笔记,javascript

2、具名插槽

父组件

<template>
    <div class="parent">
        <h2>父组件</h2>
        <div class="container">
            <Child>
                <!-- 具名插槽填充 v-slot:简写问# -->
                <template v-slot:a>
                    <p>我是填充具名插槽a位置结构</p>
                </template>
                <template #b>
                    <p>我是填充具名插槽b位置结构</p>
                </template>
            </Child>
        </div>
       
    </div>
</template>

<script setup>
import Child from './Child.vue';
//插槽：默认插槽、具名插槽、作用域插槽
</script>

<style lang="scss" scoped>
.parent{
    width:800px;
    height:400px;
    background: pink;
    .container{
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
}
</style>

子组件

<template>
    <div class="child">
        <h3>我是子组件具名插槽</h3>
        <slot name="a"></slot>
        <h3>我是子组件具名插槽</h3>
        <hr>
        <h3>我是子组件具名插槽</h3>
        <slot name="b"></slot>
        <h3>我是子组件具名插槽</h3>
    </div>
</template>

<script setup>
//引入组合式API函数仓库
import useTodosStore from '../store/modules/todo';
let todosStore = useTodosStore();
//修改仓库数据
let updateTodos = ()=>{
    todosStore.updateTodos()
}
</script>

<style lang="scss" scoped>
.child{
    width: 300px;
    height: 300px;
    background: skyblue;
}
</style>

3、作用域插槽

父组件

<template>
    <div class="parent">
        <h2>父组件</h2>
        <div class="container">
            <Child :todos="todos">
                <template v-slot="{$row,$index}">
                   <span :style="{color:$row.done?'green':'red'}">{{ $row.title }}--下标{{$index}}</span>
                </template>
            </Child>
        </div>
       
    </div>
</template>

<script setup>
import Child from './Child.vue';
// import Child2 from './Child2.vue';
//插槽：默认插槽、具名插槽、作用域插槽
//作用域插槽：就是可以传递数据的插槽，子组件可以将数据回传给父组件，
//父组件可以决定这些回传的数据是以何种结构或者外观在子组件内部去展示
let todos = ref([
    {id:1,title:'吃饭',done:true},
    {id:2,title:'睡觉',done:false},
    {id:3,title:'打豆豆',done:true},
    {id:4,title:'打游戏',done:false},
])
</script>

<style lang="scss" scoped>
.parent{
    width:800px;
    height:400px;
    background: pink;
    .container{
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
}
</style>

子组件

<template>
    <div class="child">
        <h3>子组件1</h3>
        <ul>
            <li v-for="(item,index) in todos" :key="item.id">
               <!-- 作用域插槽：可以将数据回传给父组件 -->
               <slot :$row="item" :$index="index"></slot>
            </li>
        </ul>
    </div>
</template>

<script setup>
let props = defineProps(['todos'])
</script>

<style lang="scss" scoped>
.child{
    width: 500px;
    height: 300px;
    background: skyblue;
}
</style>

vue3组件通信学习笔记,学习,笔记,javascript

vue3组件通信学习笔记,学习,笔记,javascript文章来源地址https://www.toymoban.com/news/detail-697452.html

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

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

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

相关文章

  • Vue-Element-Admin项目学习笔记（9）表单组件封装，父子组件双向通信

    Vue-Element-Admin项目学习笔记（9）表单组件封装，父子组件双向通信

    前情回顾： vue-element-admin项目学习笔记（1）安装、配置、启动项目 vue-element-admin项目学习笔记（2）main.js 文件分析 vue-element-admin项目学习笔记（3）路由分析一:静态路由 vue-element-admin项目学习笔记（4）路由分析二:动态路由及permission.js vue-element-admin项目学习笔记（5）路由分析

    2024年02月11日
    浏览(55)
  • VUE3 组件通信

    VUE3 组件通信

    用途：可以实现父子组件、子父组件、甚至兄弟组件通信 父组件 子组件 用途：可以实现子父组件通信 父组件 子组件 用途：可以实现任意组件通信 安装  配置 新建bus.js文件 使用 父组件 子组件 父组件 子组件 父组件 子组件 父组件 子组件 父组件 儿子组件1 儿子组件2 安装

    2024年03月19日
    浏览(46)

  • vue3.0组件通信

    没有加TS限制类型的时候 注意: defineProps()会返回一个对象,这个对象可以直接.出数据 加TS写法 规则: 非函数类型 基本数据类型 - 展示 引用数据类型 - 展示,但是可以修改属性,不推荐(违反单向数据流 - 不是绝对禁止使用的,偷懒可以用) 函数类型 - 子组件调用父组件传过来的函数

    2024年02月12日
    浏览(44)
  • vue3组件通信详解

    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：获取组件标签身上属性与

    2024年02月07日
    浏览(38)
  • Vue3 组件之间的通信

    Vue3 组件之间的通信

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

    2023年04月08日
    浏览(44)

  • vue3-父子组件间通信

    在实际业务开发的过程中，我们时常会遇到组件间的通信问题，比如：父子组件间通信、同级组件间通信等。本篇文章中主要介绍父子组件间通信。父子组件间通信主要有以下常见形式： 方案 父组件向子组件 子组件向父组件 props/emits props emits v-model/emits v-model emits ref/emits

    2024年02月05日
    浏览(67)

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

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

    2024年01月25日
    浏览(46)
  • vue3 快速入门系列 —— 组件通信

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

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

    2024年04月17日
    浏览(65)
  • vue3组件通信之pinia

    vue3组件通信之pinia

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

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

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

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

    2024年02月10日
    浏览(42)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包