网站首页 Vue 正文

[Vue warn]: injection “user“ not found； 31 Injected property: undefined为什么？

作者：hamimelon2020 更新时间： 2022-02-23 Vue

[Vue warn]: injection "user" not found. 
  at <TodoListStatistics> 
  at <App>
warn$1 @ vue@next:1568
17:17:17.456 gua214.html:31 Injected property: undefined
17:17:17.456 vue@next:1568 [Vue warn]: Component is missing template or render function. 
  at <TodoListStatistics> 
  at <App>

<!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 tickets']
    }
  },
  provide: {
    user: 'John Doe'
  },
  template: `
    <div>
      {{ todos.length }}
      <!-- 模板的其余部分 -->
    </div>
  `
})

app.component('todo-list-statistics', {
  inject: ['user'],
  created() {
    console.log(`Injected property: ${this.user}`) // > 注入的 property: John Doe
  }
}

).mount('#v-model-example')
</script>

改正确的

<!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 tickets']
    }
  },
  provide: {
    user: 'John Doe'
  },
  template: `
    <div>
      {{ todos.length }}
      <!-- 模板的其余部分 -->
    </div>
  `
})

app.component('todo-list-statistics', {
  inject: ['user'],
  created() {
    console.log(`Injected property: ${this.user}`) // > 注入的 property: John Doe
  }
}

).mount('#v-model-example')
</script>

上面的也不正确，还没出来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.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>

原文链接：https://blog.csdn.net/weixin_40945354/article/details/123167016

上一篇：vue.createApp与data与const App
下一篇：Vue报错：Error compiling template

网站首页 Vue 正文

[Vue warn]: injection “user“ not found； 31 Injected property: undefined为什么？

相关推荐