子组件改变父组件的两种方式

首先父子组件传值：很简单
子组件改变父组件的方式一：

  adddata: function () {this.$emit('addnum:datanum', this.datanum)}

通过this.$emit 的方式传递给父组件，然后在父组件中写方法，改变值。
这里有一个问题就是加上 :datanum 子组件改变不了父组件值
去掉就可以改变

<children :datanum="datan" @addnum="addnumdata"></children>addnumdata: function () {this.datan += 1},

方式二使用.sync 修饰符
首先在子页面同样使用this.$emit

  adddata: function () {this.$emit('update:datanum',this.num)}

注意update 要写对 : 后面是父组件传的值(要改的属性)，和值
父组件中：

<child  :datanum.sync="datan"></child>

datan 就是要改变的父组件值

我自己觉得是.sync 可以理解为 “双向绑定”，父传子是单向数据流是绑定的，但是子传父需要一定的方式 this.$emit(‘update:***’ ，***)
:datanum.sync 其实也是向子组件传值的过程
个人理解，请大家指正
prop为对象数组时不曾尝试

父组件代码：

<template><div style="color: red"><button @click="add">点击</button>父页面---{{datan}}父页面---{{post.title}}父页面---{{post.num}}<div style="padding: 20px 0">-------------------------------------------------</div><children :datanum="datan" @addnum="addnumdata"></children><child  :datanum.sync="datan"></child></div>
</template><script>import children from './children'import child from './child'export default {name: "",data: function () {return {msg: 'This is a Vue project',post: {num: 0,title: 'My Journey with Vue'},datan: 1,}},create: function () {}, /*渲染前调用*/mounted: function () {}, /*渲染后调用*/components: {child,children},// 组件注册methods: {addnumdata: function () {this.datan += 1},add: function () {this.datan += 1},}  /*方法*/}
</script><style scoped></style>

子组件一：

<template><div><div><button @click="adddata()">点击</button>子页面--{{datanum}}子页面--{{datanum}}</div><div style="padding: 20px 0">-------------------------------------------------</div></div>
</template><script>export default {name: "",data: function () {return {msg: 'This is a Vue project'}},create: function () {}, /*渲染前调用*/props: {datanum: Number},mounted: function () {}, /*渲染后调用*/methods: {adddata: function () {this.$emit('addnum:datanum', this.datanum)}}  /*方法*/}
</script><style scoped></style>

子组件二：

<template><div><div><button @click="adddata()">点击</button>子页面--{{datanum}}子页面--{{datanum}}</div><div style="padding: 20px 0">-------------------------------------------------</div></div>
</template><script>export default {name: "",data: function () {return {msg: 'This is a Vue project',num:0}},create: function () {}, /*渲染前调用*/props: {datanum: Number},mounted: function () {}, /*渲染后调用*/methods: {adddata: function () {this.$emit('update:datanum',this.num)}}  /*方法*/}
</script><style scoped></style>

子组件改变父组件的两种方式相关推荐

js操作元素：改变元素内容有两种方式： interText 和 innerHTML的区别，常用的元素的属性操作，仿电脑系统时间问好，表单元素的属性操作，案例：仿京东显示隐藏密码，样式属性操作
文章目录操作元素改变元素内容有两种方式: interText 和 innerHTML的区别常用的元素的属性操作案例:仿电脑系统时间问好表单元素的属性操作案例:仿京东显示隐藏密码样式属性操 ...
vue子组件改变父组件的值
1 在父组件的coment绑定事件 <template><div :class="classObj" class="app-wrapper"& ...
react当中子组件改变父组件的状态
子组件直接改变父组件传入的props值是不被允许的, 当需要在子组件当中改变父组件的某一个状态, 父组件传入一个改变状态的函数,然后在子组件当中调用函数即可转载于:https://www.cnblo ...
二级指针在子函数中申请内存的两种方式
二级指针:在主函数中申明变量,在子函数中分配内存,有两种方式返回二级指针.在这个过程只有深刻理解了C的函数调用模型,以及指针的内存模型,才能够掌握好. #pragma once #include &l ...
【vue报错】【子组件改变父组件数据】 Avoid mutating a prop directly since
[vue报错] Avoid mutating a prop directly since the value will be overwritten whenever the parent compo ...
LayUI upload上传组件上传文件的两种方式（手动上传、自动上传）
1 手动上传上传文件分为两步,第一步选择文件,第二步上传文件. HTML代码: <input type='button' id='selectFile' value='选择文件'> &l ...
QT-在子控件上绘图的两种方式
Qt 在控件上面绘图 label,pushbutton..... 1.构建一个新类来调用该控件的绘图函数,新类重写 paintEvent(QPaintEvent *) ▶构建: class DrawG ...
vue 父链和子组件索引_vue子组件和父组件双向绑定的几种方案
v-model案例模仿v-model实现案例我是一串要和内部名字联动的一串文字(父组件) 父组件改变值带动(父组件)点一下试试 .sync方案实现案例这是父组件的东西.利用这个框改变值,看看有没 ...
【react】子组件向父组件传值
相信已经接触react的同学们,对父子间传值已经不陌生了,但是相对来说,父组件向子组件传值很简单,直接在子组件的标签上传过去,再从子组件的props上结构出来就ok了,但是很多同学还是理解不了如何由 ...

子组件改变父组件的两种方式

子组件改变父组件的两种方式相关推荐

最新文章

热门文章