66 Vue2高级用法

自定义组件model

    <!-- 自定义 v-model -->
    <CustomVModel v-model="name"/> 

    <!-- CustomVModel -->
    <template>
        <!-- 例如：vue 颜色选择 -->
        <input type="text"
            :value="text"
            @input="$emit('change', $event.target.value)"
        >
        <!--
            1. 上面的 input 使用了 :value 而不是 v-model
            2. 上面的 change 和 model.event 要对应起来
            3. text 属性对应起来
        -->
    </template>
    
    <script>
    export default {
        model: {
            prop: 'text', // 对应 props text
            event: 'change'
        },
        props: {
            text1: String,
            default() {
                return ''
            }
        }
    }
    </script>

vue3自定义组件model

    <!-- index.vue -->
    <CustomVModel v-model="name"/> 
    
    <!-- CustomVModel.vue -->
    <template>
        <input type="text"
            :value="modelValue"
            @input="$emit('update:modelValue', $event.target.value)"
        >
    </template>
    
    <script>
    export default {
        props: {
            modelValue: String,
        }
    }
    </script>

vue2 slot

    <!-- slotDemo.vue 默认插槽 -->
    <template>
        <a :href="url">
            <slot>
                默认内容，即父组件没设置内容时，这里显示
            </slot>
        </a>
    </template>
    
    <script>
    export default {
        props: ['url'],
        data() {
            return {}
        }
    }
    </script>
    
    <!-- 用法 -->
    <SlotDemo :url="website.url">
        {{website.title}}
    </SlotDemo>

    <!-- ScopedSlotDemo.vue 作用域插槽demo -->
    <template>
        <a :href="url">
            <slot :slotData="website">
                {{website.subTitle}} <!-- 默认值显示 subTitle ，即父组件不传内容时 -->
            </slot>
        </a>
    </template>
    
    <script>
    export default {
        props: ['url'],
        data() {
            return {
                website: {
                    url: 'http://test.com/',
                    title: 'test',
                    subTitle: 'subtitle'
                }
            }
        }
    }
    </script>
    
    <!-- 用法 -->
    <ScopedSlotDemo :url="website.url">
        <template v-slot="slotProps">
            {{slotProps.slotData.title}}
        </template>
    </ScopedSlotDemo>

    <!-- 具名插槽 -->
    <div>
        <header>
            <slot name="header" />
        </header>
        <main>
            <slot  />
        </main>
        <footer>
            <slot name="footer" />
        </footer>
    </div>
    
    <!-- 用法 -->
    <template>
        <template #header></template>
        <p>默认显示到main slot中</p>
        <template #footer></template>
    </template>

vue2动态组件

动态组件

• :is="component-name
• 需要根据数据，动态渲染的场景。即组件类型不确定

    <component :is="compoentName"/>

vue2异步组件

• import()函数
• 按需加载异步大组件

    <!-- 异步组件 -->
    <template>
        <FormDemo v-if="showFormDemo"/>
        <button @click="showFormDemo = true">show form demo</button>
    </template>
    <script>
    export default {
        components: {
            FormDemo: () => import('./FormDemo'), // 异步加载组件，初始化不加载
        },
    }
    </script>