孙卫琴的《精通Vue.js》读书笔记-Vue组件的单向数据流

最新推荐文章于 2022-10-08 21:58:42 发布

Java技术集锦

最新推荐文章于 2022-10-08 21:58:42 发布

阅读量328

点赞数

分类专栏： VUE3前端开发文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/csdnuserlala/article/details/126604333

版权

本文基于《精通Vue.js》探讨Vue框架的单向数据流原则，阐述如何从父组件向子组件传递属性并保持数据同步，同时介绍如何在子组件中初始化数据和定义计算属性以实现独立更新。

摘要由CSDN通过智能技术生成

本文参考孙卫琴，杜聚宾所创作的 <<精通Vue.js: Web前端开发技术详解>>一书
在这里插入图片描述
为了简化组件的数据传递过程，避免因为在某个组件中随意修改数据而出现混乱，Vue框架提供了以下建议：
（1）单向传递组件的属性，即由父组件把属性值传递给子组件的属性。
（2）在子组件中不随意修改由父组件传入的对象或数组类型的属性的内容。
在例程1的oneflow.html中，根组件在自己的模板中会把变量data1和data2传给子组件的属性v1和v2。

例程1 oneflow.html

    <div id="app">
      <input v-model.number="data1"/>
      <input v-model.number="data2"/>
      <add :v1="data1"  :v2="data2"></add>
    </div>

    <script>
      const addComponent={
        props:['v1','v2'],
        template: '<div>{
  {v1}}+{
  {v2}}={
  {v1+v2}}</div&g