>>分享孙卫琴的Java技术专稿和著作 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 8438 个阅读者 刷新本主题
 * 贴子主题:  【Vue.js技术专题】Vue组件的单向数据流 回复文章 点赞(0)  收藏  
作者:sunweiqin    发表时间:2022-08-29 17:43:38     消息  查看  搜索  好友  邮件  复制  引用

本文参考孙卫琴,杜聚宾所创作的 <<精通Vue.js: Web前端开发技术详解>>一书

为了简化组件的数据传递过程,避免因为在某个组件中随意修改数据而出现混乱,Vue框架提供了以下建议:
(1)单向传递组件的属性,即由父组件把属性值传递给子组件的属性。
(2)在子组件中不随意修改由父组件传入的对象或数组类型的属性的内容。
在例程1的oneflow.html中,根组件在自己的模板中会把变量data1和data2传给子组件<add>的属性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> '
      }
      const app=Vue.createApp({
        data(){
          return {data1:10,data2:20}
        },
        components: {  
          'add' : addComponent  
        }
      })

      const vm=app.mount('#app')
   </script>

通过浏览器访问oneflow.html,会得到如图1所示的网页。
点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小  
图1  oneflow.html的网页

如果在oneflow.html的网页的输入框输入新的数字,根组件的data1和data2变量会发生更新,<add>组件的v1和v2属性也会被同步更新。由此可见,当父组件的变量与子组件的属性绑定后,如果父组件的变量发生更新,那么子组件的属性会同步更新。
子组件获得了父组件传入的属性值后,如果仅仅把它作为初始值,以后还需要做独立于父组件的特定的更新,或者需要依据子组件的属性推算出其他数据,该怎么办呢?Vue框架提供了以下解决方案:
(1)把属性作为初始值赋值给子组件中由data选项定义的变量。
(2)定义一个计算属性,它的取值由子组件的属性推算出来。

例如可以把oneflow.html中的addComponent组件的定义内容的代码改写为:

      const addComponent={
        props:['v1','v2'],
        data(){
          return {
            d1:this.v1, d2: this.v2
          }
        },
        computed: {  //计算属性
          sum(){  
            return this.v1+this.v2
          } ,
          remainder(){
            return this.d1-this.d2
          }
        },
        template: `<div>{{v1}}+{{v2}}={{sum}}</div>
                         <div>{{d1}}-{{d2}}={{remainder}}</div> `

      }

以上d1和d2变量的初始值为v1和v2属性。尽管Vue不允许在addComponent组件中修改v1和v2属性,但是允许对d1和d2变量做任意的修改。sum计算属性的取值来自于v1和v2属性的和,remainder计算属性的取值来自于d1和d2变量的差。    



程序猿的技术大观园:www.javathinker.net
  Java面向对象编程-->图形用户界面(上)
  JavaWeb开发-->使用过滤器
  JSP与Hibernate开发-->Java应用分层架构及软件模型
  Java网络编程-->XML数据处理
  精通Spring-->Vue Router路由管理器
  Vue3开发-->通过Axios访问服务器
  【Vue.js技术专题】CSS中DOM元素的过渡模式
  【Spring Cloud Alibaba专题】按照集群模式搭建Redis集群
  【Spring Cloud Alibaba专题】Dubbo框架中提供者回调消费者
  【Spring专题】@ControllerAdvice注解的用法
  【Spring专题】@Query和@Modifying注解的增删改操作
  探讨IT技术作者的素养
  【持久化专题】用orphanRemoval属性映射父子关系
  【持久化专题】映射对象标识符的基本原理
  【持久化专题】用@Formula注解映射派生属性
  【持久化专题】从JPA API中获得Hibernate API
  【持久化专题】JPA API的基本用法
  【Java网络编程专题】用Java套接字访问HTTP服务器读取网页数...
  【Java网络编程专题】用Java套接字编写基本的客户/服务器程序
  【Java网络编程专题】优化访问数据库的程序代码的一些技巧
  IT技术书写作技巧分享:慎用概念和术语
  更多...
 IPIP: 已设置保密
楼主      
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


中文版权所有: JavaThinker技术网站 Copyright 2016-2026 沪ICP备16029593号-2
荟萃Java程序员智慧的结晶,分享交流Java前沿技术。  联系我们
如有技术文章涉及侵权,请与本站管理员联系。