Vue组件高级通讯

2023-05-06 23:59| 来源: 网络整理| 查看: 265

在日常使用Vue做开发时，v-model可以说是最经常用到的属性，一直以来对v-model的理解都是用来双向绑定，对背后的原理一直都有些一知半解，所以今天就来深入理解一下v-model背后的原理，揭开迷雾！

一.v-model的本质是语法糖

在Vue的官方文档中是这样介绍v-model的：

『v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。』

什么是语法糖？

语法糖，简单来说就是『便捷写法』二、各种表单元素实现双向绑定的原理 2.1、input输入框 2.2、textarea元素： 2.3、select下拉框： --请选择-- 小狗小猫小仓鼠 Selected: {{ selected }} --请选择-- 小狗小猫小仓鼠 Selected: {{ selected }} 2.3、radio 和 checkbox

在使用 radio 和 checkbox 的时候，我们一般是以组的形式使用，我们一般不需要 checked 的值，而是需要 value 的值，这个时候我们可以这么使用：

*********************************************checkbox************************************************ 苹果香蕉苹果香蕉 *********************************************raido************************************************

性别: {{ rv }}

男女男女

在编程思想上，这种帮助使用者『隐藏细节』的方式叫封装。

三.v-model的冷知识

如果 v-model 绑定的是响应式对象上某个不存在的属性，那么 vue 会悄悄地增加这个属性，并让它响应式。

举个例子，看下面的代码：

tel:{{ user.tel }} user:{{user}} export default { name: "App", data() { return { user: { name: "111", }, }; }, };

响应式数据中没有定义user.tel属性，但是template里却用v-model绑定了user.tel，user上会新增tel属性，并且tel这个属性还是响应式的。

四、v-model在自定义组件中的使用

回到我们一开始的疑问了？vue中v-model如何进行父子组件的通信？如何在组件中使用呢？假如你理解了我上面的例子，那么，我们就可以很简单的在组件中使用v-model了。

父组件

{{haorooms}} import testModel from 'src/components/testModel' export default { data(){ return{ haorooms: "haorooms" } }, components: { testModel, } }

子组件

export default { data(){ return{ } }, props: ["value"] }

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章