vue父组件子组件传值、组件数据双向绑定、修饰符sync的使用

最新推荐文章于 2024-04-22 09:07:57 发布
最新推荐文章于 2024-04-22 09:07:57 发布
阅读量949 收藏 3
点赞数
分类专栏： vue 文章标签： sync修饰符 vue父组件子组件传值 prop传值 $emit传值 v-bind
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30291837/article/details/91365805
版权

1、vue父组件传子组件

      父组件：<parent :content="data"></parent>

      子组件：<son></son> 中这样写

                    props: {

                               content

                   },

2、子组件传父组件

      在子组件中：

      this.$emit('update:visible', visible)

      父组件:

      <components  @update:visible="val=>getVisible=val"></components>

3、父组件子组件数据的双向绑定：

父组件：

      <components :visible="isVisible" @update:visible="val=>isVisible=val"></components>

      简写为<components :visible.sync="isVisible"></components>

子组件

      this.$emit('update:visible', visible)

 

 

 

 

     

 

 

 

 

 

珲哥神武
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue初级 （vue常用指令和修饰符以及用法、组件传值）
zzDAYTOY的博客
06-29 310
VUE初级 大纲知识点： - Vue指令 - Vue基本属性 - Vue组件通信 Vue 基本属性 data属性 在.vue扩展名文件下，data属性必须定义为函数形式，在普通的Vue对象中，data属性就是一个对象。 相当于react中state，代表了当前组件的状态；组件呈现一个什么样的状态，data属性就必须有什么样的描述。 el属性 Vue 对象/组件将要挂载页面元素，可以使用选择器 类型：string | Element 选择器|HTML元素 限制：只在用 new 创建实例时生效。.
.sync 修饰符：进行父子组件间相互传递数据
weixin_33806914的博客
03-27 208
允许prop进行双向绑定，以this.$emit(update:PropName,newValue)的模式触发事件。 <text-document v-bind:title.sync="doc.title"></text-document> 复制代码相当于： <text-document v-bind:title="doc.title" v-on:update...
vue的双向数据绑定
最新发布
贫僧法号依平
04-22 1322
我们先从单向绑定切入单向绑定非常简单，就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新双向绑定就很容易联想到了，在单向绑定的基础上，用户更新了ViewModel的数据也自动被更新了，这种情况就是双向绑定举个栗子当用户填写表单时，View的状态就被更新了，如果此时可以自动更新Model的状态，那就相当于我们把Model和View做了双向绑定关系图如下。
.sync 父组件给子组件传值 子组件修改父组件方法
a378113472的博客
04-03 262
:visible.sync="visible" this.$emit("update:visible", false);
Vue子组件给父组件传值以及sync语法糖使用
王景清的博客
03-04 583
不使用sync语法糖 父组件 <drawPlanInfoDialog :drawPlanInfoDialogVisible="drawPlanInfoDialogVisible" @update:drawPlanInfoDialogVisible="closeDialog" > </drawPlanInfoDialog> export default { method: { closeDialog(newVal) { this.draw
Vue组件间传参（2）---父子
大香蕉的博客
08-10 1259
一、父子组件传值--.sync 众所周知，vue中是单向数据流，我们想要修改父组件传递过来的数据也只能是调用父组件中的方法进行修改，或者在父组件中进行修改，那么如何做到在子组件中直接修改父组件传递的数据呢？此时我们就需要用到修饰符.sync 父组件 <template> <div> // 子组件中需要传递的数据添加.sync修饰符 <siteDetail :dialogVisible.syn...
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
10-15
总结起来，`sync`修饰符是Vue中处理子组件修改父组件prop的一种有效方法，它通过自定义事件实现了数据的“双向绑定”效果。通过理解其工作原理，开发者可以在保持单向数据流的同时，灵活地在组件间同步数据。在实际...
Vue2.0实现组件数据的双向绑定问题
08-27
在Vue1.0版本中，使用.sync修饰符可以实现双向数据绑定，但是这个修饰符在几版本中被移除，尽管在2.3版本重新引入了.sync修饰符，但是这个修饰符只是作为一个编译时的语法糖存在。如果直接使用.sync修饰符来实现双向...
Vue使用.sync 实现父子组件的双向绑定数据问题
01-21
最近在vue 项目中有一个需求， 就是我需要根据不同的类型在页面中放不同的组件， 组件需要跟当前页面的数据进行双向绑定，如果都写在同一个页面 代码会显得比较多，毕竟我当前页面已经7-800行代码了 所以我需要把...
详解VUE自定义组件中用.sync修饰符与v-model的区别
08-27
* .sync 修饰符只能用于父组件中，用于监听子组件中的数据变化，而 v-model 可以用于父组件与子组件之间的数据绑定。 * .sync 修饰符只能监听子组件中的特定属性的变化，而 v-model 可以绑定整个子组件的数据。 * ....
vue2基础知识
m0_72967249的博客
09-23 412
vue基础知识
【vue】深入理解 vue model 属性：用于弹框
jiongshaopeng的博客
03-03 1878
帮助理解 model 用法，额外提到 computed 的 set 方法；弹框写法。
使用了.sync修饰符，然后约定子组件使用$emit(‘update:visible‘,false)，让父组不用写处理方法就可以修改绑定visible属性的变量
aliven1的博客
10-28 2046
比方说，elementui中的dialog组件，它有个prop 叫visible，在使用该组件的时候，我们希望点击dialog 右上角的x号，或者点击遮罩层，隐藏dialog。但是我们没法在子组件去直接修改父组件绑定visible属性的变量，按照规则，我们需要在dialog里。.sync 修饰符其实是个双向绑定的语法糖，一般用于“双向绑定”props的时候，类似v-model。一个事件，然后在父组件的处理方法中去修改该值，但是这样写太麻烦了，因此，我们使用了。修饰符，然后约定子组件使用。
Vue 点击按钮显示弹窗的几种不同组件封装
huangpb的博客
12-12 6953
封装一：只把弹窗封装成一个单独的组件 1. 弹窗组件 my-dialog.vue <template> <el-dialog title="选择水果" :visible.sync="dialogVisible" width="30%" @close="handleClose" > <el-checkbox-group v-model="checkList"> <el-checkbox
Vue .sync修饰符与$emit(update:xxx)写法问题
xqhys的博客
10-16 2674
在学习vue自定义事件的.sync修饰符实现改变数值时发现一个问题如下 由于props的大小写命名:fatherNum,对应不同的$emit()会有不同的效果，具体如下： 使用.sync修饰符,即 // this.$emit('update:father-num',100); //无效 this.$emit('update:fatherNum',100); //有效 //...... <father v-bind:father-num.sync="test"&g.
理解Vue中prop单向绑定，双向绑定，.sync修饰符关系
qq_39995737的博客
09-10 691
主要针对于vue的prop
vue传参数：子传父 this.$emit(‘input‘,val)
xiaokanfuchen86的博客
09-09 1311
子组件在传值的时候，选用input，如this.$emit(‘input’,val)，在父组件直接用v-model绑定，就可以获取到了 如果你不用input，则需要常规的@方法获取值，并用jq代码给kcrid赋值。
Vue中 .sync修饰符与$emit(update:xxx)
boyikenan123的博客
04-25 960
Vue中 .sync修饰符与$emit(update:xxx)
vue中dialog下修改弹框的visible的值之加.sync的区别
MISS_zhang_0110的博客
05-05 4101
比方说，elementui中的dialog组件，它有个prop 叫visible，在使用该组件的时候，我们希望点击dialog 右上角的x号，或者点击遮罩层，隐藏dialog。但是我们没法在子组件去直接修改父组件绑定visible属性的变量，按照规则，我们需要在dialog里。sync 修饰符其实是个双向绑定的语法糖，一般用于“双向绑定”props的时候，类似v-model。一个事件，然后在父组件的处理方法中去修改该值，但是这样写太麻烦了，因此，我们使用了。修饰符，然后约定子组件使用。
vue子组件向父组件传值
05-05
在 Vue 中，子组件向父组件传值的方式有两种： 1. 使用 $emit 事件 在子组件中使用 `$emit` 方法触发一个自定义事件，并传递需要向父组件传递的值，父组件中通过监听该自定义事件来接收传递的值。例如： ```vue <template> <button @click="sendValueToParent">向父组件传递值</button> </template> <script> export default { methods: { sendValueToParent() { this.$emit('send-value', '这是传递给父组件的值'); } } } </script> ``` 在父组件中监听子组件的自定义事件，并接收子组件传递的值： ```vue <template> <div> <child-component @send-value="receiveValueFromChild"></child-component> <p>从子组件接收到的值：{{valueFromChild}}</p> </div> </template> <script> export default { data() { return { valueFromChild: '' } }, methods: { receiveValueFromChild(value) { this.valueFromChild = value; } } } </script> ``` 2. 使用 .sync 修饰符 通过在父组件中使用 `.sync` 修饰符，可以实现子组件向父组件双向绑定传值。例如： ```vue <template> <div> <child-component :value.sync="valueFromParent"></child-component> <p>从子组件接收到的值：{{valueFromParent}}</p> </div> </template> <script> export default { data() { return { valueFromParent: '' } } } </script> ``` 在子组件中通过 `$emit` 方法触发一个自定义事件，父组件中使用 `.sync` 修饰符将子组件自定义事件转化为一个属性，来实现双向绑定传值： ```vue <template> <button @click="sendValueToParent">向父组件传递值</button> </template> <script> export default { props: { value: { type: String, default: '' } }, methods: { sendValueToParent() { this.$emit('update:value', '这是传递给父组件的值'); } } } </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值