Vue Provide/Inject について

2021年3月12日

使い方があっているかわからないけど、ReactのContextみたいに使えるのかな

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue html</title>
</head>
<body>
<div id="app">
    {{ count }}
    <button @click="increment">+</button>
    <child :message="count"></child>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const Child = {
      template: '<div>{{provide.count}}<button @click="provide.incrementFromChild">+ from child</button></div>',
      props: ['message'],
      inject: ['provide']
    }

    const app = new Vue({
      el: '#app',
      components: {Child},
      provide(){
        const provide = {
          incrementFromChild: () => this.count++
        }
        Object.defineProperty(provide, 'count', {
          get: () => this.count
        })
        return {provide}
      },
      data(){
        return {
          count: 1
        }
      },
      methods: {
        increment(){
          this.count++
        }
      }
    })

</script>

</body>
</html>

Vue

Posted by たみぼうず