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' />