provide和inject的用法

最新推荐文章于 2023-12-15 16:38:55 发布

hamimelon2020

最新推荐文章于 2023-12-15 16:38:55 发布

阅读量377

点赞数

分类专栏： vue JavaScript 文章标签： vue.js typescript react.js

本文链接：https://blog.csdn.net/weixin_40945354/article/details/123096747

版权

vue 同时被 2 个专栏收录

722 篇文章 4 订阅

订阅专栏

JavaScript

628 篇文章 6 订阅

订阅专栏

<!DOCTYPE html>
<div id="v-model-example" class="demo">
  <todo-list>
  </todo-list>
    </div>

<script src="https://unpkg.com/vue@next"></script>
<script>
    const app = Vue.createApp({}); 
       
    app.component('todo-list', {
      data() {
        return {
          todos: ['Feed a cat', 'Buy milk']
        }
      },
       provide: {
         user: 'John Doe'
       },
  template: `
   <div>{{ todos.length }}</div>
  `
    })

    app.component('todo-list-statistics', {
  inject: ['user'],
  created() {
    console.log(`Injected property: ${this.user}`)
  }
  
}).mount('#v-model-example')
</script>

<!DOCTYPE html>
<div id="v-model-example" class="demo">
  <todo-list>
  </todo-list>
  <todo-list-statistics></todo-list-statistics>
    </div>

<script src="https://unpkg.com/vue@next"></script>
<script>
    const app = Vue.createApp({}); 
       
    app.component('todo-list', {
      data() {
        return {
          todos: ['Feed a cat', 'Buy milk']
        }
      },
      provide() {
    return {
      todoLength: this.todos.length
    }
  },
  template: `
   <div>{{ todos.length }}</div>
  `
    })

    app.component('todo-list-statistics', {
  inject: ['user'],
  created() {
    console.log(`Injected property: ${this.user}`)
  }
  
}).mount('#v-model-example')
</script>

Uncaught TypeError: Cannot read properties of undefined (reading 'value')

<!DOCTYPE html>
<div id="v-model-example" class="demo">
  <todo-list>
  </todo-list>
  <todo-list-statistics></todo-list-statistics>
    </div>

<script src="https://unpkg.com/vue@next"></script>
<script>
    const app = Vue.createApp({}); 
       
    app.component('todo-list', {
      data() {
        return {
          todos: ['Feed a cat', 'Buy milk']
        }
      },
      provide() {
    return {
      todoLength: Vue.computed(() => this.todos.length)
    }
  },
  template: `
   <div>{{ todos.length }}</div>
  `
    })

    app.component('todo-list-statistics', {
      inject: ['todoLength'],
  created() {
    console.log(`Injected property: ${this.todoLength.value}`) // > 注入的 property: 5
  }
  
}).mount('#v-model-example')
</script>

hamimelon2020

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
provide和inject的用法

<!DOCTYPE html><div id="v-model-example" class="demo"> <todo-list> </todo-list> </div><script src="https://unpkg.com/vue@next"></script><script> const app = Vue.createApp({}); app
复制链接

扫一扫

专栏目录