定向数据传输（eg：父组件给孙子组件注入数据 provide inject）

uglyduckling0412

于 2022-08-19 16:27:21 发布

阅读量95

点赞数

分类专栏：技术档案文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/uglyduckling0412/article/details/126427355

版权

技术档案专栏收录该内容

39 篇文章

订阅专栏

本文介绍了Vue.js中如何利用provide和inject特性，绕过中间组件直接将数据从父组件传递给孙子组件，解决了prop逐级传递可能导致的问题。示例代码展示了一个简单的应用场景，通过provide提供数据并在孙子组件中注入使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父组件越过子组件可直接将数据传递给孙子组件

html

<body>
  <div id="app">
    <p>父页面</p>
    <Child></Child>
  </div>
</body>

js

<script>
  // 孙子组件
  Vue.component('grandChild', {
    template: `
      <div>
        <p>孙子组件测试数据</p>  
        <p>{{testMsg}}</p>
      </div>
    `,
    inject: ['testMsg']
  })
  // 子组件
  Vue.component('child', {
    template: `
      <div>
        <p>子组件测试数据</p>
        <grandChild></grandChild>
      </div>
    `
  })

  const vm = new Vue({
    el: '#app',
    data: {

    },
    methods: {},
    provide() {
      return {
        testMsg: '张三'
      }
    }
  })
</script>