Vue3父子组件传参有关sync修饰符的用法详解

目录
  • 单向数据流讲解
  • Vue2.x使用
    • 定义事件的形式, 通知父组件修改
    • .sync 和 update: 的使用
    • 父传子, 传递多个数据的简写
    • 采用v-model简写(要求严格)
  • Vue3.x使用
    • 普通用法
    • 简写

单向数据流讲解

单向数据流（堆可以修改，栈不可修改）

我们都知道, 父传子的数据, 是单向数据流,即子组件不能直接修改, 父组件传递过来的值

但实际上, 对于修改值, 真正是:基本数据类型不可修改，复杂数据类型不要修改引用地址（栈），它的值可以随便修改

Vue2.x使用

定义事件的形式, 通知父组件修改

也就是最基础的用法: props+$emit

写法:

.sync 和 update: 的使用

父组件传值的时候, 直接在变量后加 .sync;

子组件 this.$emit("update:变量", 实参), 即可修改父组件传递的值;

写法:

父传子, 传递多个数据的简写

如果传递给子组件的值是多个数据, 可以直接把多个数据包含在一个对象中, 借助v-bind;

注意:v-bind.sync=“doc”;

传递给子组件的不是doc对象;

而是对象中的每一个属性.

写法:

采用v-model简写(要求严格)

父组件: v-model, 子组件: 接收的变量必须为value, $emit提交的事件必须为input

写法:

Vue3.x使用

采用 v-model, 相对于2.x, 现在一个组件上可以使用多个v-model, 就是Vue2.x修饰符的用法

普通用法

父组件传递的时候使用v-model, 子组件修改的时候用: emit("uodate: num", 实参)

写法:

简写

当父组件传递给子组件的变量名为: modelValue, 可以采用这种写法

写法:

以上就是Vue3父子组件传参有关sync修饰符的用法详解的详细内容，更多关于Vue3父子组件传参的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 详解VUE自定义组件中用.sync修饰符与v-model的区别

    .sync修饰组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue-03</title> <!-- 引入Vue --> <link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css&q

  • vue .sync修饰符的使用详解

    vue的官网介绍非常不错,先通读一遍. 2.3.0+ 新增 在有些情况下,我们可能需要对一个 prop 进行"双向绑定".不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显的改动来源. 这也是为什么我们推荐以 update:my-prop-name 的模式触发事件取而代之.举个例子,在一个包含  title prop 的假设的组件中,我们可以用以下方法表达对其赋新值的意图: this.$emit('update:title', newTi

  • 如何理解Vue的.sync修饰符的使用

    本文介绍了Vue的.sync修饰符的使用,分享给大家,也给自己留个笔记 案例 <div id="app"> <div>{{bar}}</div> <my-comp :foo.sync="bar"></my-comp> <!-- <my-comp :foo="bar" @update:foo="val => bar = val"></my-

  • 前端框架Vue父子组件数据双向绑定的实现

    目录 一.父子组件单向传值 1.父向子传值 2.子向父传值 二.父子组件数据双向绑定 实现思路: 父 向 子 组件传值:使用 props 属性.( props 是property[属性] 的复数简写 ) 子 向 父 组件传值:使用自定义事件. 一.父子组件单向传值 1.父向子传值 父向子组件传值,子组件接收到数据之后,保存到自己的变量中. //父组件写法 <cld :numP="num" ></cld> //子组件定义以及数据 components:{ cld:

  • Vue中的父子组件通讯以及使用sync同步父子组件数据

    Vue中的父子组件通讯以及使用sync同步父子组件数据

    前言 父子组件通讯,可分为两种情况: 1. 父组件向子组件中传递数据 2. 子组件向父组件中传递数据 一般情况下, 1中情况可通过props解决数据传递的问题, 这里就不多赘述了. 子组件向父组件中传递数据 主要谈谈2中情景的实现,有三种方式: 一. 通过props,父组件向子组件中传递数据和改变数据的函数,通过在子组件中调用父组件传过来的函数,达到更新父组件数据(向父组件传递数据)的作用(子组件中需要有相应的响应事件) 二. 通过在子组件中触发一个 自定义事件(vm.$emit),将数据作为v

  • 详解Vue的sync修饰符

    详解Vue的sync修饰符

    1 .指令 指令即 Directive,从字面意思理解就是我告诉你要做什么,就是发送了一个指令,然后由接收指令的人去做就好了.在 Vue 中的指令有个统一好认的格式,就是以 v- 开头的就是指令,如: <div v-text="x"> </div> //v-text指定标签文本指令 <div v-on:click="add"> <div> //v-on事件绑定指令 但并不是所有的指令都以 v- 开头,对于一些简写,也是

  • Vue3父子组件传参有关sync修饰符的用法详解

    Vue3父子组件传参有关sync修饰符的用法详解

    目录 单向数据流讲解 Vue2.x使用 定义事件的形式, 通知父组件修改 .sync 和 update: 的使用 父传子, 传递多个数据的简写 采用v-model简写(要求严格) Vue3.x使用 普通用法 简写 单向数据流讲解 单向数据流(堆可以修改,栈不可修改) 我们都知道, 父传子的数据, 是单向数据流,即子组件不能直接修改, 父组件传递过来的值 但实际上, 对于修改值, 真正是:基本数据类型不可修改,复杂数据类型不要修改引用地址(栈),它的值可以随便修改 Vue2.x使用 定义事件的形式

  • C#中const 和 readonly 修饰符的用法详解

    1. 只有C#内置类型(int,double,long等)可以声明为const;结果.类和数组不能声明为const. 2. readonly 是在字段上使用的修饰符,直接以类名.字段访问. 3. const 必须在申明中初始化.之后不能再修改. 4. readonly可以在申明中初始化,也可以在构造函数中初始化,其它情况不能修改. namespace const_and_readonly { class Program { static void Main(string[] args) { Co

  • vue3 setup语法糖之组件传参(defineProps、defineEmits、defineExpose)示例详解

    vue3官方文档 defineProps 和 defineEmits 都是只能在 <script setup> 中使用的编译器宏.他们不需要导入,且会随着 <script setup> 的处理过程一同被编译掉. defineProps 接收与 props 选项相同的值,defineEmits 接收与 emits 选项相同的值. 父传子  - defineProps 父组件 <template> <div class="Father"> &

  • vue中v-model指令与.sync修饰符的区别详解

    vue中v-model指令与.sync修饰符的区别详解

    目录 v-model .sync 细微之处的区别 总结功能作用场景: v-model <!--父组件--> <template> <!--v-model 指令是语法糖--> <Child v-model="model"></Child> <!-- 把 v-model 指令展开后相当于下面的代码 --> <!-- v-model绑定的默认事件是input,默认prop是value属性 --> <Ch

  • React 非父子组件传参的实例代码

    React 是一个用于构建用户界面的 JAVASCRIPT 库. React 主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图). React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源. React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它. React 特点 1.声明式设计 −React采用声明范式,可以轻松描述应用. 2.高效 −React通过对DOM的模拟,最大限度地减少与DOM的

  • Vue常用的修饰符的作用详解

    目录 一.Vue的修饰符是什么 二.修饰符的作用 1.表单修饰符 2.事件修饰符 3.鼠标按钮修饰符 4.键盘修饰符 5.v-bind修饰符 三.常用的应用场景 一.Vue的修饰符是什么 Vue中的修饰符分为以下五种: 表单修饰符: 事件修饰符: 鼠标按键修饰符: 键值修饰符: v-bind修饰符. 二.修饰符的作用 1.表单修饰符 修饰符 作用 使用 lazy 填完信息,光标离开标签的时候,才会将值赋予给value <input type="text" v-model.lazy

  • Vue中v-on的基础用法、参数传递和修饰符的示例详解

    一.v-on的基本用法 使用v-on:click给button绑定监听事件以及回调函数,@是v-on:的缩写,也就是简写也可以使用@click.方法一般是需要写方法名加上(),在@click中可以省掉,如上述的<button @click="increment">加</button>. 以简单的计数器为例 <body> <div id="app"> <h2>{{count}}</h2> <

  • Java中的权限修饰符(protected)示例详解

    Java中的权限修饰符(protected)示例详解

    前言 大部分来自:https://blog.csdn.net/justloveyou_/article/details/61672133.并在这个博客的基础上,加上了自己的一些理解. 权限控制表 修饰词 本类 同一个包的类 继承类 其他类 private √ × × × 无(默认) √ √ × × protected √ √ √ × public √ √ √ √ 关于protected 最近在看Effective Java时,遇到了一个关于protected修饰符的问题.这个问题中,对于它的认识

  • vue中的.sync修饰符用法及原理分析

    目录 .sync修饰符用法及原理 例如 .sync修饰符的用法总结 需求描述 解决方案 .sync修饰符用法及原理 vue中我们经常会用v-bind(缩写为:)给子组件传入参数. 或者我们会给子组件传入一个函数,子组件通过调用传入的函数来改变父组件的状态. 例如 //父组件给子组件传入一个函数  <MyFooter :age="age" @setAge="(res)=> age = res">  </MyFooter>  //子组件通过

随机推荐