v-if和v-show区别+组件通信问题

v-if和v-show区别

• v-if：每次变换都需要进行销毁和创建，开销较大
• v-show：只需要创建一次便可以进行切换

组件通信问题

• 父组件给子组件传数据（prop）

  • 父组件：

    <Category :scene="scene"></Category>
    

  • 子组件：

    <script lang="ts" setup>defineProps(['scene'])
    </script>
    

• 子组件给父组件传数据（自定义事件）

  • 父组件：

    <SpuForm @changeScene="changeScene"></SpuForm>
    

  • 子组件：

    <script lang="ts" setup>let $emit = defineEmits(['changeScene'])const cancel = () => {$emit('changeScene', 0)}
    </script>
    

• 父组件操作子组件方法

  • 父组件：

    <SpuForm ref="spu"></SpuForm>
    

    <script lang="ts" setup>import { ref } from 'vue'let spu = ref<any>()const updateSpu = (row: SpuData) => {spu.value.initHasSpuData(row)}
    </script>
    

  • 子组件：

    <script lang="ts" setup>
    const initHasSpuData = async (spu: SpuData) => {...执行代码...
    }
    defineExpose({ initHasSpuData })
    </script>
    

• 多个组件同时使用的数据直接放入仓库之中，方便数据共享

• v-model实现父子组件数据同步

  <input v-model='name' />