一:实现子组件与父组件双向绑定的“sync”:

一般来说,我们实现父子组件值的传递通常使用的是【props】和自定义事件【$emit】。父组件通过【props】将值传给子组件,子组件通过【$emit】将值传给父组件,父组件通过【$on】获取子组件传过来的值,如果说想要实现子组件修改父组件传过来的值,最容易的就是这种方法了:

//父组件向子组件传值
<template>
<div>
<child-com :value="text"></child-com>
</div>
</template> <script>
export default{
data(){
return{
text:"父组件的值",
}
}
}
</script>
//子组件向父组件传值
<template>
<div @click="post"></div>
</template> <script>
export default{
methods:{
post(){
this.$emit('getChildValue',"子组件的值")
}
}
}
</script>

此时父组件可以通过【$on】获取子组件的值:

<template>
<div>
<child-com :value="text" @getChildValue = "getValue"></child-com>
</div>
</template> <script>
export default{
data(){
return {
text:"父组件的值",
}
},
methods:{
getValue(child_value){
this.text = child_value;
}
}
}
</script>

这样,就可以实现子组件修改父组件的值。

不过,这种方法有一个弊端——子组件修改父组件的值需要一个传递的过程,或者说,两个值并不是同步的

熟悉Vue1.0的朋友应该知道一个叫【.sync】的修饰符,它可以实现父子组件的双向绑定,不过在Vue2.0被移除了,直到2.3.0版本发布后才重新回归,所以一些和我一样从2.0开始使用Vue的朋友很有可能不清楚,事实上,【.sync】可以很轻松的实现子组件同步修改父组件的值:

//父组件
<template>
<div>
<child-com :value.sync="text" ></child-com>
</div>
</template>
<script>
export default{
data(){
return {
text:"父组件的值",
}
},
}
</script>
//子组件修改父组件的值
<template>
<div @click="post"></div>
</template> <script>
export default{
methods:{
post(){
this.$emit('update:data',"子组件的值")
}
}
}
</script>

我们可以看到,对于子组件来说,仅仅是自定义事件名做了一点改变,但是就代码底层逻辑来说,子组件和父组件真正实现了同步的双向绑定

当然,正如文档所说:

.sync修饰符很方便,但也会导致问题,因为破坏了单向数据流。由于子组件改变 prop 的代码和普通的状态改动代码毫无区别,当光看子组件的代码时,你完全不知道它何时悄悄地改变了父组件的状态。这在 debug 复杂结构的应用时会带来很高的维护成本。

二:自定义指令:“directives”

关于自定义指令文档其实介绍的比较详细了,而且还举了一个非常详细的例子:自定义指令

自定义指令其实就是Vue为我们提供直接操作dom的一些列方法,虽然大部分开发时间都会面向数据,但说不准什么时候确实需要操作dom本身。

就我而言,自定义指令最大的用处就是可以引用一些第三方的代码插入到Vue项目中,比如有一个操作dom的函数:

//当然,真实情况第三方的代码要复杂的多
function changeColor(dom){
dom.style.backgroundColor = "red";
}

我们可以注册一个全局的指令来为需要执行changeColor方法的dom提供指令:

Vue.directives('color',{
bind:function(el){
changeColor(el)
}
})

这样,如果需要这个dom改变颜色的话,只需要这样即可:

<div v-color>改变颜色</div>

当日常开发遇到跟dom有关的问题却一筹莫展时,可以想想自定义指令是否有功能可以解决为题。

三: inheritAttrs和attrs

前面我已经提到过了,父组件通过props可以向子组件传值,但在日常的开发中,还有一种情况很常见,就是父组件给子组件传值,这个值还要从子组件传给它的子组件,所以,我们可能会看到这样的代码:

//父组件
<div>
<child :text="text"></child>
</div> //子组件
<div>
<my-child :text="text"></my-child>
</div> //子组件的子组件
<div>
<div>{{text}}</div>
</div>

这样做是非常麻烦而且不易于维护的,通常情况下,我们可以使用vuex来解决。不过,不复杂的项目中如果仅仅为这一个问题就引入vuex实际上是没必要的,Vue提供了【inheritAttrs】和【attrs】两个功能来解决这样的问题:

//父组件
<template>
<div>
<child :text="text" :count="count"></child>
</div>
</template> <script>
export default{
data(){
return {
text:"父组件的值",
count:123456,
}
}
}
</script>
//子组件
<template>
<div>{{text}}</div>
</template>
<script>
export default{
props:["text"]
}
</script>

注意,这里父组件的count属性仅仅挂在子组件上,并没有使用。此时我们打开浏览器,可以看到子组件的dom上显示的展示了message="123456"。

此时,我们可以通过设置inheritAttrs: false来取消这种默认行为

data(){
return{
......
}
} inheritAttrs: false,
mounted(){
  console.log(this.$attrs); //{count:123456}
}

这时再看dom上就没有message属性了。然后,我还打印了this.$attrs的值,值为一个包含着count键值对的Object。

也就是说,父组件没有props的属性值会被保存在一个名为$attrs中供子组件使用,然而这并没有解决开头子组件的子组件获取值的问题。别急,我们只需要在子组件上加个东西就可以了:

<template>
<div class="child">
<my-child v-bind="$attrs"></my-child>
</div>
</template>

这样,子组件的子组件也可以获取这个值了。

四:混入——mixins

其实这个功能有些类似于es6中的Object.assign()方法。根据一定的规则合并两个配置,具体的混入策略可以看官方文档:mixins混入策略

混入最大的用处是把一些常用的data或者methods等抽出来,比如在我的项目中有许多个模态框,而关闭模态框的代码逻辑是一模一样的,为此我没有必要在多个组件中重复把关闭模态框的逻辑写入methods中,只需要在外面定义一个mixins,在需要的组件中通过:mixins: [myMin]写入即可。

Vue还有这种操作?浅析几个新手常常忽略的API的更多相关文章

  1. vue 中 直接操作 cookie 及 如何使用工具 js-cookie

    转载:https://www.cnblogs.com/xiangsj/p/9030648.html vue 中直接操作 cookie 以下3种操作方式 set: function (name, val ...

  2. IDEA环境下GIT操作浅析之二-idea下分支操作相关命令

    上次写到<idea下仓库初始化与文件提交涉及到的基本命令>,今天我们继续写IDEA环境下GIT操作之二--idea下分支操作相关命令以及分支创建与合并. 1.idea 下分支操作相关命令 ...

  3. IDEA环境下GIT操作浅析之一Idea下仓库初始化与文件提交涉及到的基本命令

    目标总括 idea 下通过命令操作文件提交,删除,与更新并推送到github 开源库基本操作idea 下通过命令实现分支的创建与合并操作 idea 下通过图形化方式实现idea 项目版本控制基本操作 ...

  4. 035——VUE中表单控件处理之使用vue控制select操作文字栏目列表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Vue之cookie操作(原生)

    Vue之cookie操作(原生) 再vue组件中加入以下几个方法,然后调用即可. methods:{ //读取cookie,需要注意的是cookie是不能存中文的,如果需要存中文,解决方法是后端先进行 ...

  6. Vue2.0 【第二季】第3节 Vue.set全局操作

    目录 Vue2.0 [第二季]第3节 Vue.set全局操作 第3节:Vue.set全局操作 一.引用构造器外部数据 二.在外部改变数据的三种方法: 三.为什么要有Vue.set的存在? Vue2.0 ...

  7. 2. Vue语法--插值操作&动态绑定属性 详解

    目录 1. 设置vue模板 2. vue语法--插值操作 3. 动态绑定属性--v-bind 一. 设置vue模板 我们经常新建一个vue项目的时候, 会写如下的一段代码 <!DOCTYPE h ...

  8. vue中比较完美请求的栗子(使用 axios 访问 API)

    vue中比较完美请求的栗子(使用 axios 访问 API) 官网地址:https://vuejs.bootcss.com/v2/cookbook/using-axios-to-consume-api ...

  9. Vue中的nextTick()浅析

    引言 在开发过程中,我们经常遇到这样的问题:我明明已经更新了数据,为什么当我获取某个节点的数据时,却还是更新前的数据? 一,浅析 为什么会这样呢?带着这个疑问先往下看. 先看一个小的例子: <d ...

随机推荐

  1. Algorithm --> KMP算法

    KMP算法 一.传统字符串匹配算法 /* * 从s中第sIndex位置开始匹配p * 若匹配成功,返回s中模式串p的起始index * 若匹配失败,返回-1 */ ) { ; || p.length( ...

  2. Java注解(1)-注解基础

    注解(Annotation)是在JAVA5中开始引入的,它为在代码中添加信息提供了一种新的方式.注解在一定程度上把元数据与源代码文件结合在一起,正如许多成熟的框架(Spring)所做的那样.那么,注解 ...

  3. 循环while do---while for循环

    一.循环结构 (.^▽^) 1.循环不是无休止进行的,满足一定条件的时候循环才会继续,称为"循环条件",循环条件不满足的时候,循环退出 2.循环结构是反复进行相同的或类似的一系列操 ...

  4. [福大软工教学] W班 第1次成绩排行榜

    作业地址 https://edu.cnblogs.com/campus/fzu/FZUSoftwareEngineering1715W/homework/837 作业要求 (1)回想一下你初入大学时对 ...

  5. alpha-咸鱼冲刺day3-紫仪

    总汇链接 一,合照 emmmmm.自然还是没有的. 二,项目燃尽图 三,项目进展 今天把数据库的表给建好了,学长那边把登陆跟注册页面也做好了(纯页面,html5+css的那种) 四,问题困难   日常 ...

  6. Week02-Java基本语法与类库

    1. 本周学习总结 本周主要学习了包装类,明白了包装类比基本数据类型的优点(见书面作业4.2),了解了自动装箱,自动拆箱的概念和区别(见书面作业4.1),知道了java中的引用类似C语言中的指针,明白 ...

  7. Archlinux安装和使用技巧

    一 准备工作 1  文件下载及启动盘制作 文件可以在https://mirrors.ustc.edu.cn/,这是个中科大的镜像网,选择如下: 下载完成后,就是制作一个启动盘,我使用的是Linux下强 ...

  8. 《Language Implementation Patterns》之访问&重写语法树

    每个编程的人都学习过树遍历算法,但是AST的遍历并不是开始想象的那么简单.有几个因素会影响遍历算法:1)是否拥有节点的源码:2)是否子节点的访问方式是统一的:3)ast是homogeneous或het ...

  9. 201621123068 Week03-面向对象入门

    1. 本周学习总结 初学面向对象,会学习到很多碎片化的概念与知识.尝试学会使用思维导图将这些碎片化的概念.知识点组织起来.请使用工具画出本周学习到的知识点及知识点之间的联系.步骤如下: 1.1 写出你 ...

  10. 2017 清北济南考前刷题Day 3 afternoon

    期望得分:100+40+100=240 实际得分:100+40+100=240 将每个联通块的贡献乘起来就是答案 如果一个联通块的边数>点数 ,那么无解 如果边数=点数,那么贡献是 2 如果边数 ...