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