分享Vue组件传值的几种常用方式(二)

请听我详细讲解“分享Vue组件传值的几种常用方式(二)”的完整攻略。

一、前言

在Vue组件传值的开发过程中，我们通常会遇到如下问题：如何在不同的组件之间传递数据？如何在父子组件之间通信？如何在没有父子关系的组件之间传递数据？这些问题都可以通过不同的方式来解决。在上一篇文章中，我们分享了“prop与$emit”这种传值方式。而今天，我们来分享“provide与inject”这种传值方式。

二、provide与inject

provide与inject是Vue官方提供的一种组件之间传值的方式。provide用于提供数据，inject用于注入数据。provide与inject的特点是：父组件提供的数据可以被所有子组件所访问，即使这些子组件在父组件之间有多层嵌套关系或者没有直接的父子关系都可以实现。下面我们来具体讲解provide与inject的使用。

1. provide和inject的用法

provide与inject同时使用，provide用于提供数据，inject用于注入provide提供的数据。这里需要注意的是，data中的数据不能直接用于provide的提供数据，如果需要provide data中的某个数据，需要使用Vue内置的data()方法或new Vue()创建的实例中的data方法。

// 父组件提供数据
provide:{
    fromProvide: "provide调用我了!"
},
data(){
    return{
        dataTest: '组件中的数据'
    }
}

// 子组件注入数据
inject: ['fromProvide', 'dataTest']

通过上面的代码，我们可以发现，provide可以提供数据，而inject可以注入数据。使用inject时需要注意以下几点：

1. 公共数据绑定在组件实例中，而不是this（即子组件实例）。
2. 在使用 inject 时，如果忽略 provide 中的某个属性，它在子组件中会得到 undefined。为了避免这种情况，我们可以提供一个默认值：inject: { foo: { default: 'default foo' }}。

2. 示例说明

这里，我们通过一个实例来帮助大家更好的理解provide与inject的使用。

<!-- 父组件 -->
<template>
    <div>
        <div>
            <p>
                父组件的数据：{{ provideData }}
            </p>
            <button @click="changeProData">改变父组件的数据</button>
        </div>
        <hr>
        <div>
            子组件一的数据：{{ fromProvide }}
        </div>
        <hr>
        <div>
            孙组件的数据：{{ grandsonData }}
        </div>
    </div>
</template>
<script>
import Son from './Son'
export default {
    components: {
        Son
    },
    data() {
        return {
            provideData: 'provide提供的数据',
        }
    },
    provide:{
        fromProvide: 'father provide'
    },
    methods: {
        changeProData(){
            this.provideData = 'provide已改变'
        }
    },
}
</script>

<!-- 子组件一 -->
<template>
    <div>
        子组件一的数据：{{ fromProvide }}
        <hr>
        <son></son>
    </div>
</template>
<script>
import Son from './Grandson'
export default {
    components: {
        Son
    },
    inject: ['fromProvide']
}
</script>

<!-- 孙组件 -->
<template>
    <div>
        孙组件的数据：{{ grandsonData }}
    </div>
</template>
<script>
export default {
    inject: ['fromProvide'],
    data(){
        return {
            grandsonData: '孙组件的数据'
        }
    },
}
</script>

在上述代码中，我们定义了三个组件，分别是父组件、子组件一和孙组件。通过provide提供了一个属性fromProvide，子组件一中通过inject来使用父组件提供的数据。孙组件同样使用inject来获取上面的数据，并且还可以使用自己的数据。在父组件中同样提供了一个提供数据的方法，并通过点击按钮来改变提供的数据。当点击按钮后，father provide的值也会变成provide已改变。

通过使用provide与inject方式，我们可以非常方便地在不同组件之间传递数据。是Vue组件传值的一种非常实用的方式。

以上就是我对“分享Vue组件传值的几种常用方式(二)”的详细讲解，希望对大家有所帮助。