Vue3父子组件间通信和组件间双向绑定怎么实现

本篇内容主要讲解“Vue3父子组件间通信和组件间双向绑定怎么实现”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue3父子组件间通信和组件间双向绑定怎么实现”吧!

网站建设哪家好,找创新互联!专注于网页设计、网站建设、微信开发、重庆小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了芦溪免费建站欢迎大家使用!


假如确要修改,可以使用下面说的方式进行通信:
首先,在子组件的UI点击回调方法中,调用this.$emit('【自己设置事件名】')
向外发送一个事件

接着各级父组件会收到这个事件,
则在父组件中 调用 子组件标签处,
@【事件名】= "回调方法名"的形式,监听该事件以及配置回调方法
回调方法中就可 对 子组件用意修改 的 父组件数据字段 进行修改;

注意,
触发事件的命名,用驼峰命名法(如下heHeDa);
监听事件的命名,用横杆间隔法(如下he-he-da)

代码:

            Hello World! heheheheheheda        

运行,点击组件:Vue3父子组件间通信和组件间双向绑定怎么实现

携带参数的事件 发送和监听回调

this.$emit()可以增加参数位,
父组件的监听回调中,
则可加形参位 用于接收参数(如handleItemEvent(param)中的 param);

代码:

运行,点击效果:

Vue3父子组件间通信和组件间双向绑定怎么实现
子组件需 发送多个参数 亦可,只需在this.$emit()按需增加参数位,
父组件的监听回调中,增加对应的形参 去接收就可:

效果:Vue3父子组件间通信和组件间双向绑定怎么实现



当然 父组件 接收 子组件参数 后的 计算逻辑,
可以在 子组件传参 的时候 计算完成 再传给this.$emit()
父组件接收时,直接 受值就可(handleItemEvent(count));

效果同上一个例子;

使用 组件的emits板块 整理组件事件

实际开发场景中,我们一个组件自己设置的触发事件可能会很多,
我们不可能一个一个去梳理核实,
这个时候即可以使用 组件的emits板块 来整理组件的事件;

可以把组件中 自己设置到的事件都写在这里,方便梳理,提高可读性
或者者把 想要定义的事件 写在这里,
如此一来,假如不记得编写对应的自己设置事件,
Vue系统会在运行时 给予警告

假如不记得编写对应的自己设置事件,Vue系统会在运行时 给予警告

Vue3父子组件间通信和组件间双向绑定怎么实现

使用 组件emits板块的 Object形式 校验外传的参数值

可以根据需要,使用 组件emits板块的 Object形式  校验外传的参数值,
如下,子组件的emits板块,
‘key’值定义对应的事件名,‘value’值定义一个校验函数,

返回true表示同意数值外传,
返回false表示不同意,会给出警告;

运行,点击效果:Vue3父子组件间通信和组件间双向绑定怎么实现

结合$emitv-bindv-model 实现 父子组件通信(数据双向绑定)

v-model可以实现数据字段与DOM节点内容的双向绑定,
也可以实现数据字段与数据字段之间的双向绑定;
v-bind只能是实现单向数据流

若不自己设置承接的字段名,则需要用modelValue作为默认的承接字段名
同时,$emit()的一参默认为update:modelValue,二参为绑定的数据;

如下代码,
子组件 的承接变量modelValue 同父组件的count字段 双向绑定,
(实际上就是v-model的特性 —— 将 子组件的内容即modelValue  同 父组件的数据字段双向绑定)
而后显示在子组件的DOM中({{modelValue}}):

效果:Vue3父子组件间通信和组件间双向绑定怎么实现

当然也可以自己设置字段名
这种方式需要给v-model字段接一个字段名,
同时将这个字段名替代子组件中所有modelValue的位置:

实现效果与上例相同;

结合$emitv-bindv-model 实现 父子组件通信(多个字段的应用案例)

如下代码,
父组件的count与子组件承接的testField字段,
父组件的count1与子组件承接的testField1字段,
分别实现了双向绑定:

效果:Vue3父子组件间通信和组件间双向绑定怎么实现

自己设置修饰符

机制:在父组件调用处,在v-model后 使用自己设置修饰符
实现修饰符逻辑的地方,如点击事件中,
通过this.modelModifiers.[自己设置修饰符名]返回的布尔值
判断客户能否使用了修饰符,
进而分别对使用与否做相应的解决;
另外'modelModifiers'板块中可以指定默认值(下代码指定为一个空对象{});

试验this.modelModifiers的作用

首先下面是一个空的解决,'modelModifiers'板块中指定默认值(下代码指定为一个空对象{}),
mounted函数中打印 子组件modelModifiers属性的内容,

代码如下,
运行后,可以见打印了一个对象{captalize: true}
正是我们传入的自己设置修饰符.captalize(这里未做解决)
【假如这里v-model不接修饰符,
console.log(this.modelModifiers);将打印一个空对象{}】:

Vue3父子组件间通信和组件间双向绑定怎么实现

下面在子组件的点击回调handleClick()中,通过this.modelModifiers.[自己设置修饰符名]实现自己设置修饰符逻辑

实现效果即 点击之后使得对应的字符串 全变大写;

效果:

Vue3父子组件间通信和组件间双向绑定怎么实现

插槽【slot】【传组件示例】

使用关键 主要分两个部分:
自己设置子组件:
在需要 被父组件插入组件的位置,
使用标签对临时占位;

父组件:
在调用子组件标签对时,
子组件标签对
写上 要替换子组件标签对位置的组件

【slot】的出现,
方便父子组件之间数据的传递,
方便DOM的传递;

            Hello World! heheheheheheda        

运行效果:Vue3父子组件间通信和组件间双向绑定怎么实现

注意,slot标签上是无法直接增加事件(修饰符)的,如有需要,可以在外层包裹一层标签,再加上事件

运行,点击提交文本或者按钮:Vue3父子组件间通信和组件间双向绑定怎么实现

插槽【传 字符串示例】

Vue3父子组件间通信和组件间双向绑定怎么实现

插槽【传 自己设置子组件 示例】

运行:Vue3父子组件间通信和组件间双向绑定怎么实现

插槽作用域问题

尽管,父组件中 往子组件标签间 插入的组件 会替换子组件的插槽位,
但是父组件中 往子组件标签间 插入的组件,
其所使用的数据字段,依然是父组件的,而非子组件

父组件的template中 调用的数据是 父组件中的 data;
子组件的template中 调用的数据是 子组件中的 data;

Vue3父子组件间通信和组件间双向绑定怎么实现

插槽 UI默认值

可以在子组件的插槽标签间 编写默认值
假如父组件没有使用 组件 注入插槽
则对应位置 会显示默认值

效果:Vue3父子组件间通信和组件间双向绑定怎么实现

插槽的灵活拆分与应用【具名插槽】