Vue.js 中使用 provide 和 inject 共享数据的方法

在 Vue.js 中，如果多个组件需要共享同一些数据，我们可以通过父子组件传递 props、通过 vuex 进行状态管理或者使用 Vue.js 提供的 provide 和 inject。本文将重点介绍如何使用 provide 和 inject 实现数据共享的方法，并给出示例代码。

provide 和 inject 的基本用法

provide 和 inject 是 Vue.js 的两个 API，它们一起使用可以实现数据的上下文传递。provide 和 inject 的使用方法如下：

// javascriptcn.com 代码示例
// 父组件提供 provide 对象
export default {
  provide () {
    return {
      foo: 'bar'
    }
  }
}

// 子组件使用 inject 属性访问 provide 对象
export default {
  inject: ['foo'],
  created () {
    console.log(this.foo) // bar
  }
}

在父组件中，我们使用 provide 对象返回一个对象，对象里面包含我们要共享的数据。在子组件中，我们可以通过传入一个数组并使用 inject 属性访问父组件的数据。

实现联级组件的数据共享

在很多时候，我们需要在多层嵌套的组件中进行数据共享，这时候可以通过父组件和子组件的 provide 和 inject 配合使用来实现联级组件的数据共享。

比如，在一个列表页中嵌套了一个搜索组件，当搜索组件触发搜索操作的时候，我们需要将搜索关键词传递给列表组件，以便重新渲染列表：

// javascriptcn.com 代码示例
// 父组件提供 searchQuery 数据
export default {
  data () {
    return {
      searchQuery: null
    }
  },
  provide () {
    return {
      searchQuery: this.searchQuery, // 将 searchQuery 数据提供给子组件
      update: () => {
        this.search() // 定义更新方法
      }
    }
  }
}

// 子组件使用 inject 获取 searchQuery 数据
export default {
  inject: ['searchQuery', 'update'],
  methods: {
    search () {
      console.log(`搜索关键词为：${this.searchQuery}`)
      this.update()
    }
  }
}

在这个例子中，父组件提供了 searchQuery 和 update 两个数据，searchQuery 是提供给子组件的数据，update 是定义子组件中搜索操作时更新列表的方法。子组件通过 inject 获取父组件提供的 searchQuery 和 update 并实现搜索操作。

示例代码

在这个例子中，我们将实现一个简单的留言板组件，需要实现以下几个功能：

• 用户可以发布留言；
• 用户可以回复留言；
• 用户可以编辑留言。

我们首先定义留言板的数据结构：

// javascriptcn.com 代码示例
{
  "messageList": [
    {
      "id": 1,
      "message": "Vue.js 真好用！",
      "replyList": [
        {
          "id": 2,
          "message": "谢谢夸奖！"
        }
      ]
    }
  ]
}

我们需要在留言列表组件中获取该数据，并将其传递给子组件 Comment 组件。同时，Comment 组件需要将用户发布的留言通过 provide 传递给其子组件 Reply 组件和 Edit 组件，用于实现回复和编辑操作。

留言列表组件的代码如下：

// javascriptcn.com 代码示例
<template>
  <div class="message-list">
    <h1>留言板</h1>
    <comment
      v-for="message in messageList"
      :key="message.id"
      :message="message"
    />
  </div>
</template>

<script>
import Comment from './Comment.vue'

export default {
  components: { Comment },
  data () {
    return {
      messageList: [
        {
          id: 1,
          message: 'Vue.js 真好用！',
          replyList: [
            {
              id: 2,
              message: '谢谢夸奖！'
            }
          ]
        }
      ]
    }
  }
}
</script>

<style scoped>
.message-list {
  margin: 20px;
}
</style>

Comment 组件的代码如下：

// javascriptcn.com 代码示例
<template>
  <div class="comment">
    <p>{{ message.message }}</p>
    <reply v-for="reply in message.replyList" :key="reply.id" :reply="reply" />
    <button @click="toggleEdit">编辑</button>
    <edit :message="message" v-if="editEnabled" />
  </div>
</template>

<script>
import Reply from './Reply.vue'
import Edit from './Edit.vue'

export default {
  components: {
    Reply,
    Edit
  },
  props: {
    message: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      editEnabled: false
    }
  },
  provide () {
    return {
      message: this.message,
      enableEdit: () => {
        this.enableEdit()
      }
    }
  },
  methods: {
    toggleEdit () {
      this.editEnabled = !this.editEnabled
    },
    enableEdit () {
      this.editEnabled = true
    }
  }
}
</script>

<style scoped>
.comment {
  margin: 20px;
  border: 1px solid #eee;
  padding: 20px;
  position: relative;
}
</style>

Reply 组件的代码如下：

// javascriptcn.com 代码示例
<template>
  <div class="reply" v-if="reply">
    <p>{{ reply.message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    reply: {
      type: Object
    }
  },
  inject: ['message']
}
</script>

<style scoped>
.reply {
  margin-left: 20px;
  border-left: 1px solid #eee;
  padding-left: 20px;
  color: #666;
}
</style>

Edit 组件的代码如下：

// javascriptcn.com 代码示例
<template>
  <div class="edit" v-if="editing">
    <textarea :value="message.message" @input="handleChange"></textarea>
    <button @click="$emit('done')">完成编辑</button>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      editing: false
    }
  },
  inject: ['enableEdit'],
  created () {
    this.enableEdit()
  },
  methods: {
    handleChange (event) {
      this.message.message = event.target.value
    }
  }
}
</script>

<style scoped>
.edit {
  position: absolute;
  top: 50px;
  left: 20px;
  right: 20px;
  border: 1px solid #eee;
  padding: 20px;
  background: #fff;
}
.edit textarea {
  width: 100%;
  height: 100px;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
  resize: none;
}
.edit button {
  margin: 10px 0;
  padding: 10px;
  border: none;
  border-radius: 4px;
  background: #42b983;
  color: #fff;
  cursor: pointer;
  outline: none;
}
.edit button:hover {
  background: #3aa876;
}
</style>

在这个例子中，我们通过 provide 和 inject 实现了留言、回复以及编辑的功能，实现了跨多级组件的数据共享。

总结

本文介绍了如何使用 Vue.js 的 provide 和 inject 实现数据的上下文传递，以及如何通过 provide 和 inject 实现多级组件的数据共享。provide 和 inject 是 Vue.js 中实现跨多级组件数据共享的重要API，可以大大提高组件的数据复用性和灵活性。使用 provide 和 inject 的方法可以大大提高代码的可维护性和可扩展性，是值得推荐使用的一种方案。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6527f7ee7d4982a6eba89c5b