getting start

快速上手

依赖要求

本文会帮助你从头使用vue2-context。

安装vue2-context

yarn add vue2-context -S
// 或
npm install vue2-context -S

创建上下文实例

config.js

import { createContext } from 'vue2-context';
export const chatContext = createContext();

父级组件

<template>
  <ChatContextProvider :value="hello">
    parent: {{ hello.val }}
    <Child />
    <button @click="hello.val++">++</button>
  </ChatContextProvider>
</template>
  
<script>
import Child from './Child.vue';
import { chatContext } from './config';
const ChatContextProvider = chatContext.Provider;
export default {
  components: { ChatContextProvider, Child },
  data() {
    return {
      hello: {
        val: 0
      }
    }
  },
}
</script>

子级组件

<template>
  <div>
    child : {{ context.value.val }}</div>
</template>
  
<script>
import { useContext } from 'vue2-context';
import { chatContext } from './config';
export default {
  data() {
    return {
      context: useContext(chatContext, this)
    }
  },
}
</script>