码云 Vue3教程 2021-06-04

36. [组件]provide和inject多级组件传值

AI 概述

创建一个多级组件常用传递方式多级组件传值 provide 和 inject 本节的要讲的关键词是provide和inject，作用是进行多级组件传值的。创建一个多级组件新建一个文件Demo36.html，写上基本代码。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...

文章目录隐藏

创建一个多级组件
常用传递方式
多级组件传值 provide 和 inject

本节的要讲的关键词是provide和inject，作用是进行多级组件传值的。

创建一个多级组件

新建一个文件Demo36.html，写上基本代码。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo13</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
</head>

<body>
    <div id="app"></div>
</body>
<script>
    const app = Vue.createApp({
        template: `<div>我有一套房子，我先传给我的儿子</div>`
    })
    const vm = app.mount("#app")
</script>

现在的需求是，要写一个子组件，然后子组件里调用另一个子组件（也可以想象成孙子组件），然后从最上层的父组件里传递值给子组件。

我们先来编写两个子组件的代码。

<script>
    const app = Vue.createApp({
        data(){
            return {house:'北京别墅一套'}
        },
        template: `<div>我有一套房子，我先传给我的儿子</div> `
    })

    app.component('child',{
        template:`
            <div>我是子组件，我要把房子再传给我儿子。</div>
        `
    })

    app.component('child-child',{
        template:`
            <div>我是孙子，等待接收房子</div>
        `
    })
    const vm = app.mount("#app")
</script>

基本结果和组件已经有了，下面我们看看这种情况如何传递。

常用传递方式

现在的需求就是一层层传递下去，我们可以使用props的形式进行接收，然后继续传递，代码可以可成这样。

<script>
    const app = Vue.createApp({
        data(){
            return {house:'北京别墅一套'}
        },
        template: `
            <div>我有一套房子，我先传给我的儿子</div>
            <child :house="house" />
         `
    })

    app.component('child',{
        props:['house'],
        template:`
            <div>我是子组件，我要把房子再传给我儿子。</div>
            <div>儿子接收{{house}}</div>
            <child-child :house="house" />
        `
    })

    app.component('child-child',{
        props:['house'],
        template:`
            <div>我是孙子，等待接收房子</div>
            <div>孙子接收{{house}}</div>
        `
    })
    const vm = app.mount("#app")
</script>

这时候到浏览器中查看一下结果，可以发现结果是可以成功的。每次用 props 接收，然后再用绑定属性的方式传递给下一层。

但现在需求变化了，富豪北京三环内还有一套 200 平方的房子，不想通过儿子的手，直接传递给孙子，那如何操作那？

多级组件传值 provide 和 inject

这时候就可以使用使用provide传递和inject接收了，先在数据项的下面声明一个provide。

const app = Vue.createApp({
    data(){
        return {house:'北京别墅一套'}
    },
    provide:{
        newHouse:'北京 200 平方房子一套'
    },
    template: `
        <div>我有一套房子，我先传给我的儿子</div>
        <child :house="house" />
        `
})

然后儿子组件不用作任何更改，直接在孙子组件里用inject接收就可以了。

app.component('child-child',{
    props:['house'],
    inject:['newHouse'],
    template:`
        <div>我是孙子，等待接收房子</div>
        <div>孙子接收{{house}},{{newHouse}}</div>
    `
})

写完后，可以打开浏览器中进行查看，发现孙子组件也是可以顺利接收到的。

我们学习案例的层级并不多，所以你感觉不是很强烈，如果这种层级关系达到 5-6 级，再使用props进行传递，那就会非常麻烦，而且会有大量的代码冗余。使用provide和inject可以解决这个问题。

以上关于36. [组件]provide和inject多级组件传值的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。

「点点赞赏，手留余香」

赞 1 赏

给作者打赏，鼓励TA抓紧创作！

微信

支付宝

还没有人赞赏，快来当第一个赞赏的人吧！

声明：本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » 36. [组件]provide和inject多级组件传值