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

最新推荐文章于 2024-02-04 01:48:12 发布

uglyduckling0412

最新推荐文章于 2024-02-04 01:48:12 发布

阅读量56

点赞数

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

本文链接：https://blog.csdn.net/uglyduckling0412/article/details/126427355

版权

技术档案专栏收录该内容

38 篇文章 1 订阅

订阅专栏

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

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>