Vue学习笔记-3 前言

Vue 2.x相比较Vue 1.x而言，升级变化除了实现了Virtual-Dom以外，给使用者最大不适就是移除的组件的props的双向绑定功能。

以往在Vue1.x中利用props的twoWay和.sync绑定修饰符就可以实现props的双向绑定功能，但是在Vue2中彻底废弃了此功能，如果需要双向绑定需要自己来实现。

Vue2的组件props通信方式

在Vue2中组件的props的数据流动改为了只能单向流动，即只能由组件外（调用组件方）通过组件的DOM属性attribute传递props给组件内，组件内只能被动接收组件外传递过来的数据，并且在组件内，不能修改由外层传来的props数据。

关于这一点的修改官方给的解释：

prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。

虽然废弃了props的双向绑定对于整个项目整体而言是有利且正确的，但是在某些时候我们确实需要从组件内部修改props的需求

案例

假设我要做一个iOS风格的开关按钮，需求就只有两个：

1.点击按钮实现 开/关 状态切换

2.不点击按钮，也可以通过外部修改数据切换开关状态，比如级联联动开关。

代码大致是类似这样的：

<div id="app">
  <!--开关组件-->
  <switchbtn :result="result"></switchbtn>
  <!--外部控制-->
  <input type="button" value="change" @click="change">
</div>

//开关组件代码
Vue.component("switchbtn",{
  template:"<div @click='change'>{{result?'开':'关'}}</div>",
  props:["result"],
  methods:{
    change(){
      this.result=!this.result;
    }
  }
});

//调用组件
new Vue({
  el: "#app",
  data:{
    result:true//开关状态数据
  },
  methods:{
    change(){
      this.result=!this.result;
    }
  }
});

但是在vue2.0中上面的代码在点击开关时会报错：

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "result" (found in component )

组件内不能修改props的值，同时修改的值也不会同步到组件外层，即调用组件方不知道组件内部当前的状态是什么

在Vue2.0中，实现组件属性的双向绑定方式

1. 在组件内的data对象中创建一个props属性的副本

因为result不可写，所以需要在data中创建一个副本myResult变量，初始值为props属性result的值，同时在组件内所有需要调用props的地方调用这个data对象myResult。

Vue.component("switchbtn", {
  template: "<div @click='change'>{{myResult?'开':'关'}}</div>",
  props: ["result"],
  data: function () {
    return {
      myResult: this.result//data中新增字段
    };
  },
  ......
});

2. 创建针对props属性的watch来同步组件外对props的修改

此时在组件外（父组件）修改了组件的props，会同步到组件内对应的props上，但是不会同步到你刚刚在data对象中创建的那个副本上，所以需要再创建一个针对props属性result的watch（监听），当props修改后对应data中的副本myResult也要同步数据。

Vue.component("switchbtn", {
  template: "<div @click='change'>{{myResult?'开':'关'}}</div>",
  props: ["result"],
  data: function () {
    return {
      myResult: this.result
    };
  },
  watch: {
    result(val) {
      this.myResult = val;//新增result的watch，监听变更并同步到myResult上
    }
  },
  ......

3. 创建针对props副本的watch，通知到组件外

此时在组件内修改了props的副本myResult，组件外不知道组件内的props状态，所以需要再创建一个针对props副本myResult，即对应data属性的watch。

在组件内向外层（父组件）发送通知，通知组件内属性变更，然后由外层（父组件）自己来变更他的数据

最终全部代码：

<div id="app">
  <switchbtn :result="result" @on-result-change="onResultChange"></switchbtn>
  <input type="button" value="change" @click="change">
</div>

Vue.component("switchbtn", {
  template: "<div @click='change'>{{myResult?'开':'关'}}</div>",
  props: ["result"],
  data: function () {
    return {
      myResult: this.result//①创建props属性result的副本--myResult
    };
  },
  watch: {
    result(val) {
      this.myResult = val;//②监听外部对props属性result的变更，并同步到组件内的data属性myResult中
    },
    myResult(val){
      //xxcanghai 小小沧海 博客园
      this.$emit("on-result-change",val);//③组件内对myResult变更后向外部发送事件通知
    }
  },
  methods: {
    change() {
      this.myResult = !this.myResult;
    }
  }
});

new Vue({
  el: "#app",
  data: {
    result: true
  },
  methods: {
    change() {
      this.result = !this.result;
    },
    onResultChange(val){
      this.result=val;//④外层调用组件方注册变更方法，将组件内的数据变更，同步到组件外的数据状态中
    }
  }
});

至此，实现了组件内数据与组件外的数据的双向绑定，组件内外数据的同步。最后归结为一句话就是：组件内部自己变了告诉外部，外部决定要不要变。

4. 什么样的props适合做双向绑定？

首先要声明的是双向绑定的props肯定是不利于组件间的数据状态管理，尤其是在复杂的业务中更是如此，所以要尽可能的少用双向绑定，过于复杂的数据处理建议使用Vuex （http://vuex.vuejs.org/zh-cn/intro.html）

但是在我们平时使用过程中又确实有props双向绑定的需求，个人认为只有在满足以下条件时再使用双向绑定的props。

1.组件内部需要修改props。

2.组件需要可以由外部在运行时动态控制，而非单纯初始化。

3.组件外部需要读取组件内的状态来进行处理

满足上述条件的有比如本例中的switch开关组件，需要外部控制开关状态；再比如Tab多标签页组件的activeIndex属性，需要可以由外部控制标签页当前打开哪一页等等

自动化的props双向绑定处理

Vue的mixin组件——propsync

通过上例也可以看出在Vue2.0中实现props的双向绑定很麻烦，如果有两个props需要做双向绑定上面的代码就要实现两遍，代码极其冗余。

 所以我写了一个mixin来自动化处理props的双向绑定的需求——propsync。

主要功能

1.实现了在组件内自动创建所有prop对应的data属性，方便组件内修改prop使用。解决了vue2.0中不允许组件内直接修改prop的设计。

2.实现了组件外修改组件prop，组件内自动同步修改到data属性。

3.实现了组件内修改了data属性（由prop创建的），自动向组件外发出事件通知有内部prop修改。由组件外决定是否要将修改同步到组件外

propsync的使用方法

编写组件

1.对于编写组件时，如果需要props双向绑定，则直接引入mixin，并在配置中声明mixin即可： mixins: [propsync]

2.此mixin会根据prop的名称生成对应的data属性名，默认为在prop属性名前面增加"p_"，即若prop中有字段名为active，则自动生成名为p_active的data字段（props到data的名称变更方法可自行修改，详见propsync源码开头配置）

3.propsync默认会将所有props创建双向绑定，可通过propsync:false来声明此props不需要创建双向绑定。

例：

import propsync from './mixins/propsync';//引入mixin文件
export default {
 name: "tab",
 mixins: [propsync],//声明使用propsync的mixin
 props: {
  active: {
   type: [String, Number],//会被propsync自动实现双向绑定，在data中创建p_active变量
  },
  width: {
   type: [Number, String],
   propsync:false//不会被propsync实现双向绑定
  }
 },
 methods: {
  setActive(page, index, e) {
   this.p_active = index;//可以直接使用this.p_active
  }
 }
}

调用组件

1.引入propsync后，会在内部双向绑定的data变更后触发一个onPropsChange事件。遂在调用组件处，增加一个事件监听 onPropsChange（可修改），当组件内修改了props时propsync会触发此事件，返回参与依次为：修改prop名称，修改后值，修改前值。可以由当前组件调用方（父组件）来决定是否要将组件内的变更同步到调用方

例：

<tab :active="active" @onPropsChange="change"></tab>
 
......略
{
 data:{
  active:0
 },
 methods:{
  change:function(propName,newVal,oldVal){
   this[propName]=newVal;
   console.log("组件tab的" +propName+ "属性变更为" +newVal);
  } 
 }
}

源码下载

Vue的mixin组件propsync代码：vue_jb51.rar

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# vue2  # props  # 双向绑定  # vue  # 组件  # Vue2实现组件props双向绑定  # Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案  # 解析Vue2.0双向绑定实现原理  # vue2.0数据双向绑定与表单bootstrap+vue组件  # 解决Vue2.x父组件与子组件之间的双向绑定问题  # Vue2.0实现组件数据的双向绑定问题  # Vue2.x和Vue3.x的双向绑定原理详解  # 手动实现vue2.0的双向数据绑定原理详解  # 绑定  # 实现了  # 是在  # 要将  # 创建一个  # 的是  # 这是  # 我要  # 也不  # 但是在  # 也要  # 不需要  # 中有  # 会在  # 并在  # 可以通过  # 到你  # 可以直接  # 做一个  # 写了 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Laravel定时任务怎么设置_Laravel Crontab调度器配置  Laravel怎么做数据加密_Laravel内置Crypt门面的加密与解密功能  JavaScript中的标签模板是什么_它如何扩展字符串功能  原生JS获取元素集合的子元素宽度实例  独立制作一个网站多少钱,建立网站需要花多少钱？  如何自定义建站之星模板颜色并下载新样式？  5种Android数据存储方式汇总  Laravel如何实现全文搜索功能？（Scout和Algolia示例）  小米17系列还有一款新机？主打6.9英寸大直屏和旗舰级影像  哪家制作企业网站好,开办像阿里巴巴那样的网络公司和网站要怎么做？  Windows11怎样设置电源计划_Windows11电源计划调整攻略【指南】  Laravel怎么实现一对多关联查询_Laravel Eloquent模型关系定义与预加载【实战】  如何用好域名打造高点击率的自主建站？  开心动漫网站制作软件下载,十分开心动画为何停播？  Laravel怎么上传文件_Laravel图片上传及存储配置  Firefox Developer Edition开发者版本入口  标准网站视频模板制作软件,现在有哪个网站的视频编辑素材最齐全的，背景音乐、音效等？  node.js报错：Cannot find module 'ejs'的解决办法  html5怎么画眼睛_HT5用Canvas或SVG画眼球瞳孔加JS控制动态【绘制】  如何登录建站主机？访问步骤全解析  javascript事件捕获机制【深入分析IE和DOM中的事件模型】  如何在云主机上快速搭建网站？  Thinkphp 中 distinct 的用法解析  如何在Tomcat中配置并部署网站项目？  怎么制作一个起泡网,水泡粪全漏粪育肥舍冬季氨气超过25ppm，可以有哪些措施降低舍内氨气水平？  郑州企业网站制作公司,郑州招聘网站有哪些？  米侠浏览器网页图片不显示怎么办 米侠图片加载修复  百度浏览器如何管理插件 百度浏览器插件管理方法  详解Android中Activity的四大启动模式实验简述  Laravel怎么使用Collection集合方法_Laravel数组操作高级函数pluck与map【手册】  为什么要用作用域操作符_php中访问类常量与静态属性的优势【解答】  如何在IIS中新建站点并解决端口绑定冲突？  linux top下的 minerd 木马清除方法  php打包exe后无法访问网络共享_共享权限设置方法【教程】  Laravel如何使用Blade组件和插槽？（Component代码示例）  Laravel怎么集成Log日志记录_Laravel单文件与每日日志配置及自定义通道【详解】  JavaScript如何操作视频_媒体API怎么控制播放  Laravel怎么配置不同环境的数据库_Laravel本地测试与生产环境动态切换【方法】  实例解析Array和String方法  laravel怎么使用数据库工厂（Factory）生成带有关联模型的数据_laravel Factory生成关联数据方法  Laravel如何获取当前登录用户信息_Laravel Auth门面使用与Session用户读取【技巧】  Laravel如何实现多表关联模型定义_Laravel多对多关系及中间表数据存取【方法】  Laravel如何生成PDF或Excel文件_Laravel文档导出工具与使用教程  如何在建站之星网店版论坛获取技术支持？  Laravel Artisan命令怎么自定义_创建自己的Laravel命令行工具完全指南  如何用美橙互联一键搭建多站合一网站？  百度浏览器ai对话怎么关 百度浏览器ai聊天窗口隐藏  Laravel API资源(Resource)怎么用_格式化Laravel API响应的最佳实践  为什么php本地部署后css不生效_静态资源加载失败修复技巧【技巧】  Windows驱动无法加载错误解决方法_驱动签名验证失败处理步骤