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

目录
文章目录隐藏
  1. 创建一个多级组件
  2. 常用传递方式
  3. 多级组件传值 provide 和 inject

本节的要讲的关键词是provideinject,作用是进行多级组件传值的。

创建一个多级组件

新建一个文件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进行传递,那就会非常麻烦,而且会有大量的代码冗余。使用provideinject可以解决这个问题。

「点点赞赏,手留余香」

1

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 36. [组件]provide和inject多级组件传值

2 评论

  1. 这个好像是vue2.0的东西吧!vue3.0好像一点都没有涉及到,是我找错了,还是作者题目取错了。复习了一遍vue2.0的知识点,感谢作者大大。

发表回复