网站建站麻烦吗,建设通网,淮南城乡建设局网站,达川网站制作文章目录 一、单向数据流二、props父子传值2.1、父组件2.2、子组件2.3、优缺点2.3.1、优点2.3.2、缺点 三、.sync修饰符双向绑定3.1、父组件3.2、子组件3.3、优缺点3.3.1、优点3.3.2、缺点 3.4、[文档](https://v2.cn.vuejs.org/v2/guide/components-custom-events.html#sync-%… 文章目录 一、单向数据流二、props父子传值2.1、父组件2.2、子组件2.3、优缺点2.3.1、优点2.3.2、缺点 三、.sync修饰符双向绑定3.1、父组件3.2、子组件3.3、优缺点3.3.1、优点3.3.2、缺点 3.4、[文档](https://v2.cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6) 四、最后 一、单向数据流
所有的 props 都遵循着单向绑定原则props 因父组件的更新而变化自然地将新的状态向下流往子组件而不会逆向传递。这避免了子组件意外修改父组件的状态的情况不然应用的数据流将很容易变得混乱而难以理解。另外每次父组件更新后所有的子组件中的 props 都会被更新到最新值这意味着你不应该在子组件中去更改一个 prop。
正常的父子组件传值及修改值需要props传递属性到子组件然后需要子组件触发自定义事件到父组件去改值。
二、props父子传值
2.1、父组件 在父组件中定义数据及传递给子组件接收自定义事件在自定义事件中修改值 templatedivchild :titletitle changechangeTitle/child/div
/template
scriptexport default {data() {return {title:old title}},methods: {// 最鸡肋的就是这个环节changeTitle(e) {this.title e // new title}}}
/script2.2、子组件 子组件中接收数据定义触发修改值的方法及$emit触发自定义事件携带参数到父组件 templatedivdiv clickchangeTitle{{title}}/div/div
/template
scriptexport default {props: {title: {default: old title},},methods: {changeTitle(){// 触发一个更新事件this.$emit(change:title,new title)}}}
/script2.3、优缺点
2.3.1、优点 明确的数据流props通过显式地传递数据使得数据的来源和使用更加清晰明确。 数据单向流动props的数据只能由父组件向子组件传递避免了数据的混乱和不可预测性。 较好的可维护性props作为接口定义可以提高组件的可维护性和可复用性。 2.3.2、缺点 相对繁琐对于较为复杂的数据传递和组件间的通信需要通过定义多个props增加了代码的复杂度。 需要额外的事件机制子组件需要通过事件或方法通知父组件进行数据更新增加了一定的开发成本和复杂度。 三、.sync修饰符双向绑定
3.1、父组件
templatedivchild :title.synctitle //div
/template
scriptexport default {data() {return {title:old title}}}
/script3.2、子组件
templatedivdiv clickchangeTitle{{title}}/div/div
/template
scriptexport default {props: {title: {default: old title},},methods: {changeTitle(){// 触发一个更新事件this.$emit(update:title,new title)}}}
/script3.3、优缺点
3.3.1、优点
对比props父子传值及.sync修饰符双向绑定最直观的感受就是代码简化了 .sync 修饰符实质就是父组件监听子组件更新某个props的请求的缩写语法一种语法糖。 简洁的语法使用.sync修饰符可以简洁地实现父子组件的双向数据绑定。 方便的数据更新子组件可以直接修改父组件的数据子组件的变化会直接影响到父组件中对应的数据。 :title.synctitle
// 写法等同于
:titletitle
update:titletitle $event3.3.2、缺点 数据绑定不够明确由于子组件可以直接修改父组件的数据可能导致数据变得不可预测增加了调试和维护的难度。 双向绑定可能带来性能问题频繁的数据变动可能导致性能问题需要合理控制双向绑定的使用。 3.4、文档 四、最后
本人每篇文章都是一字一句码出来希望大佬们多提提意见。顺手来个三连击点赞收藏关注✨。创作不易给我打打气加加油☕
