Vue核心基础（四）自定义表单组件双向数据绑定 <input type="text" :value="message"

自定义表单组件双向数据绑定

<input type="text" :value="message" @input="($event)=>message = $event.target.value">{{message}}

<input type="text" v-model="message">{{message}}

自定义表单组件

在自己定义表单组件中使用v-model="message"
子组件中

props:['modelValue'],
template:'<input type="text" :value="modelValue" @input="onInput">',
methods:{
    onInput(){
        this.$emit('update:modelValue',event.target.value)
    }
}

接收参数名 modelValue
触发事件名 update:modelValue
表单元素中 :value="modelValue" @input=($emit)=>$emit('update:modelValue',event.target.value)"

透传attribute

透传attribute属性

除 props emit v-on自定义事件如: class style 透传给子组件
相同属性，合并
事件继承
深层组件继承
禁用继承 inheritAttrs:true,
获取属性$attrs
透传属性绑定根节点上，若有多个子节点则报报警告，属性无法透传。 vue2.x 模板只能有一个根节点 vue3.x 模板可以有多个根节点

插槽

一、插槽是什么及基础使用插槽使用条件:

父子组件之间
子组件定义插槽
父组件定义插槽内容

二、具名插槽

插槽设定名称
父组件根据名称放内容

三、作用域插槽
插槽传参

子组件中slot插槽标签绑定属性
父组件使用插槽处接收属性

四、v-slot指令简写

使用: 子组件中定义数据品列表数据
父组件中定义界面界面效果

依赖注入

应用：解决跨组件传参问题

根组件定义provide选项提供数据

const app = createApp({
    components: {
        Myparent: Parent,
    },
    data() {},
    provide() {//函数形式
        return {
            message: this.message,
            count: this.count,
        }
    },
})

深层子组件inject选项接收数据

export default {
    inject: ['message'],
    created() {
        console.log(this.message)//injected value
    }
}

注入别名

inject: {
    localMessage: {//本地属性名
        from： 'message'//本地来源名
    }
}

注入默认值

//声明注入的默认值必须使用对象形式
inject: {
    message: {
        from: 'message',//当与原注入名同名是，这个属性是可选的
        default: 'default value'
    },
}

和响应式数据配合使用

data() {
    return {
        message: 'hello'
    }
},
provide() {
    return {
        //显示提供一个计算属性
        message: computed(() => this.message)
    }
},

图像.png

图像 (2).png

动态组件

实际上is属性的值为组件的名字,可以通过 keep-alive 保留组件的状态，避免组件的销毁和重建

keep-calive组件

缓存包裹在其中的动态切换组件

<KeepAlive>包裹动态组件时，会缓存不活跃的组件实例，而不是销毁它们。任何时候都只能有一个活跃组件实例作为 <KeepAlive> 的直接子节点。

<div id="app">
    <ul>
        <li @click="currentTab='home'">首页</li>
        <li @click="currentTab='kind'">分类</li>
        <li @click="currentTab='Cart'">购物车</li>
        <li @click="currentTab='User'">我的</li>
    </ul>
    
    <keep-alive>
        <component :is="currentTab"></component>
    </keep-alive>
</div>

activated、deactivated钩子函数

当一个组件在 <KeepAlive> 中被切换时，它的activated 和deactivated 生命周期钩子将被调用，用来替代mounted和unmounted 。这适用于<KeepAlive> 的直接子节点及其所有子孙节点。

使用include / exclude可以设置哪些组件被缓存，使用max 可以设定最多缓存多少个

<!-- 用逗号分隔的字符串 -->
<KeepAlive include="a,b">
    <component :is="view"></component>
</KeepAlive>

<!-- 正则表达式(使用'v-bind') -->
<KeepAlive :include="/a|b/">
    <component :is="view"></component>
</KeepAlive>

<!-- 数組(使用'v-bind') -->
<KeepAlive :include="['a', 'b']">
    <component :is="view"></component>
</KeepAlive>

如果想要条件性的被keep-alive缓存，就必须显示声明一个name选项