>>分享孙卫琴的Java技术专稿和著作 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 8437 个阅读者 刷新本主题
 * 贴子主题:  【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面向对象编程-->Java常用类(上)
  JavaWeb开发-->在Web应用中访问Web服务
  JSP与Hibernate开发-->域对象在持久化层的四种状态
  Java网络编程-->ServerSocket用法详解
  精通Spring-->Vue组件开发基础
  Vue3开发-->Vue CLI脚手架工具
  【Vue.js技术专题】命名路由
  【Spring Cloud Alibaba专题】@SentinelResource注解的用法
  【Spring Cloud Alibaba专题】Dubbo框架中提供者回调消费者
  【持久化专题】为什么JPA和Hibernate的持久化方法都抛出运行...
  【Spring专题】服务器端推送
  【Spring专题】Spring框架的数据验证机制
  【持久化专题】@Enumerated注解映射枚举类型
  【持久化专题】Hibernate的配置文件
  【持久化专题】JPA API的基本用法
  【持久化专题】映射Bag包(值类型的集合)
  【持久化专题】Spring与Hibernate与JPA的整合
  【Java网络编程专题】用Apache HttpClients下载网上的图片等...
  【Java网络编程专题】优化访问数据库的程序代码的一些技巧
  【持久化专题】比较JPA的EntityManager接口与Hibernate的Ses...
  【Java基础编程专题】Java集合的批量操作
  更多...
 IPIP: 已设置保密
树形列表:   
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


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