vue.js父子组件之间的数据通信，细节总结

隐性规则：单行数据流

学前疑问：

1.父组件如何向子组件通信数据？
2.父组件可以直接修改子组件的数据！但是反过来绝对不可以！那怎么解决这个问题呢？
3.所谓的单向数据流，就是约束子直接改父，以避免上述情况的发生！
4.子组件如何向父组件通信数据？

要点简介：

1.父组件**都是通过属性*** 的方式向子组件传递数据*** 的！
2.父组件可以直接修改子组件的数据！反之，绝对不可以！
3.子组件都是通过事件触发的方式，向父组件通信数据的！
4.父子组件之间通信数据的隐性规定：就是“ 单向数据流 ”！

重要代码示下：

<body><div id="app"><counter :count="4" @change="handleIncrease"></counter><counter :count="6" @change="handleIncrease"></counter><div>{{total}}</div></div><script>//定义子组件var counter = {props: ['count'],//接受父组件的什么内容？属性内容！data: function() {return {number: this.count}},template: '<button @click="handleClick">{{number}}</button>',methods: {handleClick: function() {this.number ++;this.$emit('change', 1); //自定义事件名称change，携带的参数为1}}}//父组件var app = new Vue({el: '#app',data: {total: 10},components: {counter: counter},methods: {handleIncrease: function(step) {this.total += step;}}})</script>
</body>

注意上述代码，记住几点：

父组件：都是通过属性的方式向子组件传递数据的！

子组件：定义属性number复制父组件数据，再通过事件触发的方式，完成向父组件通信数据。

:counte="0"，表示传递 数字0

:counte="0"，表示传递 字符串0

以上就是关于 “ vue.js踩坑之单向数据流 ” 的全部内容。

vue.js踩坑之单向数据流相关推荐

vue.js踩坑之ref引用细节点
vue.js组件之H5页面,DOM标签或者组件中,通过ref="自定义name名称"引用的细节点要点简介:[ 见下文案例 ] 使用is=" "解决H5出现的标 ...
vue.js踩坑之组件参数检验与非props特性
vue组件参数检验与非props特性学前疑问: 什么是组件参数检验? 组件参数校验都有哪些属性设置?分别表示什么意思? 什么是props特性?何为非props特性?如何判断? 重要代码讲解如下: 父 ...
Vue中video.js踩坑日记单页切换后视频无法播放
使用video.js踩坑.单页切换后视频无法播放切换页面以后正常显示效果但是我切换路由返回上一层或者点击跳转下个页面的返回的时候就不显示了?? 解决思路在生命周期beforeDestroy函数中 ...
html2canvas图片的文字偏移,html2canvas在Vue项目踩坑-生成图片偏移不完整
背景最近做一个Vue项目需求是用户长按保存图片,页面的数据是根据不同id动态生成的,页面渲染完生成内容图片让用户长按保存的时候,把整个页面都保存起来. 在项目遇到的坑是图片能生成,可是生成的图片总是 ...
Next.js踩坑入门系列（七） —— 其他相关知识
Next.js踩坑入门系列 (一) Hello Next.js (二) 添加Antd && CSS (三) 目录重构&&再谈路由 (四) Next.js中期填坑 (五) ...
Vue关于双向绑定和单向数据流的理解
很多接触Vue开发不久的同学会有疑问,vue既然是单向数据流为什么会有双向绑定一说? 关于Vue数据绑定首先引用官网原话: AngularJS 使用双向绑定,Vue 在不同组件间强制使用单向数据流.这 ...
Vue（踩坑）vue.esm.js?efeb:628 [Vue warn]: Error in render: TypeError: Cannot read property '0' of unde
1,项目报错: 把数组定义下,把异步请求的数据赋给定义的变量数组
element table多选表格_【经验总结】vue + element-ui 踩坑—— table 篇
工作一年,主要职责是负责公司后台管理平台的开发与维护.此间面对各种业务需求,通过面向谷歌编程等常见方式,积累了一些微不足道的经验. 本篇为总结的第一篇(也许有其他篇)-- table 篇对于后台管理 ...
html2canvas在Vue项目踩坑-生成图片偏移不完整
背景最近做一个Vue项目需求是用户长按保存图片,页面的数据是根据不同id动态生成的,页面渲染完生成内容图片让用户长按保存的时候,把整个页面都保存起来. 在项目遇到的坑是图片能生成,可是生成的图片总是 ...

vue.js踩坑之单向数据流

vue.js父子组件之间的数据通信，细节总结

`隐性规则：单行数据流`

学前疑问：

要点简介：

注意上述代码，记住几点：

vue.js踩坑之单向数据流相关推荐

最新文章

热门文章