上善若水,水善利萬物而不爭。——《道德經》
简介 在平时开发是经常用到一些父子组件通信,经常用到props、vuex等等,这里面记录另外的三种方式v-model、sync是怎么使用,再说是怎么实现,其实v-model、sync都是语法糖。还有$attr、$listener实现父子组件通信。
使用方式
v-model 2.2.0+ 新增 v-mode1其实就是一个语法糖,默认会利用名为value的props和名为input的事件,但是像单选框、复选框等类型的输入龙剑可能会讲value特性用于不同的目的。 v-model的使用场景:当子组件需要改变父组件通过props传入的值 父组件 父组件通过v-model绑定值
如需根据v-model传入的值改变,而触发其他更新请通过watch传入的值 子组件 声明model对象 设置事件event和prop字段
通过porps接受父组件传送值
修改是通过this.$emit广播事件 代码示例: 父组件代码 <template>
<children v-model="message"></children>
</template>
<script>
import children from "./children.vue";
export default {
components: {
children
},
data() {
return {
message: "parent"
};
},
watch: {
// 监听message变化
message(newV, oldV) {
console.log(newV, oldV);
}
}
};
</script> 子组件代码 <template>
<h1>{{ message }}</h1>
</template>
<script>
export default {
model: {
prop: "message", //这个字段,是指父组件设置 v-model 时,将变量值传给子组件的 msg
event: "input" //这个字段,是指父组件监听 parent-event 事件
},
props: {
message: String //此处必须定义和model的prop相同的props,因为v-model会传值给子组件
},
mounted() {
//这里模拟异步将msg传到父组件v-model,实现双向控制
setTimeout(_ => {
this.$emit("input", "children");
//将这个值通过 emit 触发parent-event,将some传递给父组件的v-model绑定的变量
}, 1500);
}
};
</script> 上面这个示例是通过v-model实现的,下面不通过v-model实现同样效果。
不使用 v-model 实现 代码示例如下: 父组件代码修改 <template>
<Children :message="message" @input="(event) => { message = event }"/>
</template>
<script>
// 不变
</script> 子组件代码修改 <template>
// 不变
</template>
<script>
export default {
props: {
message: String
},
mounted() {
setTimeout(() => {
this.$emit("input", "children");
}, 1500);
}
};
</script> 只是把v-model拆分为props和@input事件,子组件不需要配置model,只需要接受props和通过this.$emit广播事件就可以。 当然这个相对于v-model方法比较简便,但是灵活度查很多,选择使用那种看个人喜好。 在线地址: 不能放iframe只能放一放一个链接了本篇代码实例
sync 2.3.0+ 新增 在有些情况下,我们可能需要对一个 prop 进行**“双向绑定”。不幸的是,真正的双向绑定**会带来维护上的问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显的改动来源。 这也是为什么我们推荐以 update:myPropName 的模式触发事件取而代之。同时也可以通过sync修饰符来实现。 在上面代码的基础上大致修改如下: 父组件 通过修改触发事件input为update:myPropName实现相同效果 子组件 通过修改this.$emit(update:myPropName) 代码如下: 父组件代码修改 // 修改如下
<Children :message="message" @update:input="(event) => { message = event }"/> 子组件代码修改 // 其他不变
this.$emit("update:input", "children"); sync实现 上面的代码可以通过sync简写为下面代码: 父组件代码修改 // 修改如下
<Children :messag.sync="message"/> 子组件代码修改 // 其他不变
this.$emit("update:messag", "children"); 同时sync也支持对象,要配合v-bind实现可以简写为:,但是要注意这个对象如下两条: 注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)。取而代之的是,你只能提供你想要绑定的属性名,类似 v-model。 将 v-bind.sync 用在一个字面量的对象上,例如 v-bind.sync=”{ title: doc.title }”,是无法正常工作的,因为在解析一个像这样的复杂表达式的时候,有很多边缘情况需要考虑。 attrs、listeners
$attrs 2.4.0 新增 类型:{ [key: string]: string }
只读
详细: 包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。 $listeners 2.4.0 新增 类型:{ [key: string]: Function | Array<Function> }
只读
详细: 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。 实现通信 实现父子组件通信 父组件代码 <template>
<div class="parent">
<Children
:message="message"
@upDate="upDate"
type="del"
@input="(event) => { message = event }"
/>
</div>
</template> <script>
import Children from "./Children";
export default {
components: {
Children
},
data() {
return {
message: "parent",
type: "del"
};
},
methods: {
upDate (event) {
console.log(event);
this.type = event;
}
},
watch: {
message: function() {
console.log("更新message值为" + this.message);
}
}
};
</script> 子组件代码 <template>
<div v-bind="$attrs" v-on="$listeners" class="children">{{message}} <span @click="$listeners.upDate('data')">{{$attrs.type}}</span></div>
</template> <script>
export default {
props: {
message: String
},
mounted() {
// console.log(this.$attrs);
// console.log(this.$listeners);
setTimeout(() => {
this.$emit("input", "children");
this.$emit('upDate', 'add')
}, 1500);
}
};
</script> 同时$attrs、$listeners都是可以跨域父子组件,可以父子子子组件传递,类似于react中的context,只是一部分设计理念相同。
总结 其实就是检测到.sync修饰符,在complier阶段会编译生成多个prop,生成多个事件。其实像这个指令、修饰符、自定义指令都是在vue编译是解析成为v8能执行的代码。 无论是vue、babel、react的complier编译阶段大致分为三个阶段: 通过词法解析parse生成抽象AST或抽象代码树
优化AST,比如vue标记静态节点,babal中抽取静态代码,这个阶段被称为optimize或者优化AST树
在AST代码的阶段上,生成可执行代码,这个过程可以叫做codegen v-model、sync都可以实现父子组件通信,并且可以在子组件中修改父组件传入的值。在平常看法的时候进场可以用到这两种方式,具体选择那种方式看个人喜好。在element-ui这个input组件也用到相关的属性。

Vue中v-model解析、sync修饰符解析的更多相关文章

  1. 043——VUE中组件之使用.sync修饰符与computed计算属性实现购物车原理

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

  2. VUE组件3 数据流和.sync修饰符

    单向数据流:数据通过prop从父组件传递到子组件中,当父级组件中的数据更新时,传子组件也会更新,但不能在子组件中修改.防止子组件在无意中修改,改变父级组件状态 然而,双向数据绑定在某些情况下有用.如果 ...

  3. Vue中v-model指令的常用修饰符

    v-model指令有三个可以选用的修饰符:.lazy..number以及.trim.vue官方对此的描述为: .number-输入字符串转为有效的数字 .lazy-取代input监听change事件 ...

  4. vue中的.sync修饰符用法

    在项目中接触到父组件传值给子组件的时候,想在子组件改变父组件传的值.(比如用于弹窗关闭) 但是正常来说,vue2是不允许子组件直接改父组件传进去的值的. 所以我们需要在子组件内定义自定义事件,通知父组 ...

  5. vue中.sync 修饰符

    一直以来,都不太明白.sync的用法,归根结底原因在于,没有仔细阅读“.sync修饰符”. 正好,最近在拿一个项目练手,然后使用了elment-ui,然后在用到dialog的时候,属性visible是 ...

  6. vue 之 .sync 修饰符

    在一些情况下,我们可能会需要对一个 prop (父子组件传递数据的属性) 进行“双向绑定”. 在vue 1.x 中的 .sync 修饰符所提供的功能.当一个子组件改变了一个带 .sync 的prop的 ...

  7. Vue sync修饰符的使用

    父子组件传值,父组件可以给子组件传值,但是子组件是不能修改组件提供的值,这里vue提供了sync修饰符,以前父组件点击子组件显示,子组件关闭按钮,父组件再点击子组件就无法让子组件显示.因为子组件点击关 ...

  8. vue的.sync 修饰符

    很多时候,我们会对 prop (父子组件传递数据的属性) 进行“双向绑定” 在vue 1.x 中的 .sync 修饰符所提供的功能.当一个子组件改变了一个带 .sync 的prop的值时,这个变化也会 ...

  9. [Vue]组件——.sync 修饰符实现对prop 进行“双向绑定”

    一.同时设置1个 prop 1.以 update:my-prop-name 的模式触发事件,如对于title属性: this.$emit('update:title', newTitle) 2.然后父 ...

随机推荐

  1. 基于Clang的Source to Source源代码转换(一)

    Clang中包含了非常多的关于抽象语法树(AST)的访问和操作的类和接口.我们程序开发人员可以直接通过继承其中的某些类,重写其中的关键成员方法,从而形成我们自己的对抽象语法树的操作. 那么,首先我们简 ...

  2. access remote libvirtd

    访问远程libvirtd服务因为是在一个可信环境中运行,所以可以忽略安全方面的操作,步骤如下:(1)更改libvirtd配置    1.1 更改/ect/sysconfig/libvirtd文件,打开 ...

  3. spin_lock、spin_lock_irq、spin_lock_irqsave区别【转】

    转自:http://blog.csdn.net/luckywang1103/article/details/42083613 void spin_lock(spinlock_t *lock); voi ...

  4. windows编程中 一些前缀区分 IDR和IDD

    IDC_:控件的ID命名前缀(Control) IDM_:菜单的ID命名前缀(Menu) IDD_:对话框的ID命名前缀(Dialog) IDR_:资源的ID命名前缀(Resource) IDS_:字 ...

  5. The Viewport Transformation

    英文帖子链接http://glasnost.itcarlow.ie/~powerk/GeneralGraphicsNotes/projection/viewport_transformation.ht ...

  6. zepto源码研究 - ajax.js($.ajaxJSONP 的分析)

    简要:jsonp是一种服务器和客户端信息传递方式,一般是利用script元素赋值src来发起请求.一般凡是带有src属性的元素发起的请求都是可以跨域的. 那么jsonp是如何获取服务器的数据的呢? j ...

  7. 给Object扩展新方法

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

  8. OO alv report

    DATA: gr_alvgrid TYPE REF TO cl_gui_alv_grid ,"ALV对象 gt_fieldcat TYPE lvc_t_fcat , "ALV字段控 ...

  9. ASP.NET MVC 中的视图生成

    关于 ASP.NET MVC 中的视图生成 在 ASP.NET MVC 中,我们将前端的呈现划分为三个独立的部分来实现,Controller 用来控制用户的操作,View 用来控制呈现的内容,Mode ...

  10. 201521123091 《Java程序设计》第3周学习总结

    Java 第三周总结 第三周的作业. Java 第三周总结 1.本章学习总结 2.Java Q&A 1.代码阅读 2.构造函数有什么用?其编写格式是什么?如果一个类不写构造函数,它有构造函数吗 ...