Vue学习笔记：VCA下使用provide与 inject

在VCA模式下使用provide和inject与之前文档中VOA模式类似，不同 的是需要在使用前进行import

import { provide, inject } from 'vue'

在此篇文档中，使用一个示例来演示provide 与inject的使用

功能如下：

组件 Navbar Detail List部署在根组件App上。

在初始页面，显示Navbar与List。

List组件为列表形式，绑定click事件，点击后List隐藏，Detail显示。

Detail显示后Navbar隐藏。显示来源信息。提供一个按钮，点击按钮则返回初始状态，Navba显示，List显示，Detail隐藏

功能分析：

1、要实现组件切换可以使用component 的is属性

2、跨组件传递时间，需要使用provide与inject

具体实现：

App.vue

which用于切换显示List与Detail

show用于切换显示Navba

info用于在Detail中显示来源信息

<template>
    <Navbar v-show="show"/>
    <component :is="which"></component>
</template>
<script>
import Navbar from './Navbar.vue'
import List from './List.vue'
import Detail from './Detail.vue'
import {ref,provide} from 'vue'
export default{
    components:{
        Navbar,List,Detail
    },
    setup(){
        const which = ref('List')
        const show = ref(true)
        const info = ref('')
        provide("which", which)
        provide('show', show)
        provide('info', info)
        return {
            which,
            show
        }
    }
}
</script>

Navbar.vue

<template>
    <div>nav</div>
</template>
<script></script>

List.vue

在List.vue中使用inject获取App 提供的which 与info

<template>
    <div>
        <ul>
            <li v-for="data in datalist" :key="data" @click="handleClick(data)">{{ data }}</li>
        </ul>
    </div>
</template>
<script>
import { ref, inject } from 'vue'
export default {
    setup() {
        const datalist = ref(["aaa", "bbb", "ccc"])
        const which = inject("which")
        const info = inject('info')
        const handleClick = (data) => {
            console.log(data)
            which.value='Detail'
            info.value=data
        }
        return {
            datalist,
            handleClick
        }
    }
}
</script>

Detail.vue

<template>
    <div>
        <div>{{ info }}</div>
        <button @click="handelClick"> fanhui </button>
    </div>

</template>
<script>
import { inject, onMounted } from 'vue';
export default {
    setup() {
        const show = inject('show')
        const which = inject('which')
        const info = inject('info')
        onMounted(() => {
            show.value = false
        })
        const handelClick=function(){
            show.value = true
            which.value = 'List'
        }

        return {
            show,
            info,
            handelClick
        }
    }
}
</script>

实现效果