vue 中 v-model 和 .sync修饰符

v-model  

 1 <input v-model="searchText">
 2
 3 等价于
 4 <input
 5   v-bind:value="searchText"
 6   v-on:input="searchText = $event.target.value"
 7 >
 8 当用在组件上时,v-model 则会这样:
 9 <custom-input
10   v-bind:value="searchText"
11   v-on:input="searchText = $event"
12 ></custom-input>
13
14 Vue.component(‘custom-input‘, {
15   props: [‘value‘],
16   template: `
17     <input
18       v-bind:value="value"
19       v-on:input="$emit(‘input‘, $event.target.value)"
20     >
21   `
22 })
23
24 //父组件
25  <vModel v-model="textValue"  @focus="showValue" class="username-input" placeholder="Enter your username" :a=‘1‘></vModel>
26 //子组件
27 <template>
28         <input type="text" v-bind=‘$attrs‘ :value="value" @input="input">
29    <input :value="value" @change="change">
30 </template>
31 <script>
32   
33 inheritAttrs: false, //当在子组件中加入inheritAttrs:false时class等属性就不会自动加到根元素上了。
34
35 // model: {
36 // //一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件,但是像单选框、复选框
37 // //等类型的输入控件可能会将 value 特性用于不同的目的。model 选项可以用来避免这样的冲突:
38 // prop: "value",
39 // event: "change"
40 // },
41   
42 props: ["value"],
43   
44 methods: {
45 input(e) {
46 this.$emit("input", e.target.value);
47 console.log(e.target.value);
48 }
49 // change(e) {
50 // this.$emit("change", e.target.value);
51 // console.log(e.target.value);
52 // }
53 },
54
55 </script>

.sync修饰符

 1 //父组件
 2  <Sync  v-bind:title.sync="title"></Sync>   等价于       <Sync :title="title" @upDate.title = ‘title=$event‘></Sync>
 3
 4
 5 //子组件
 6 <template>
 7   <a href="javascript:void(0);" @click="changeValue">{{title}}</a>
 8 </template>
 9 <script>
10 export default {
11   props:{
12   title:{
13     default:‘1‘,
14     type:String
15    }
16   },
17   data(){
18     return{
19
20     }
21   },
22 methods:{
23   changeValue(){
24     this.$emit(‘update:title‘, 11111111)
25     }
26   }
27 }
28 </script>
29 <style lang="sass" scoped>
30
31 </style>

  

 

原文地址:https://www.cnblogs.com/cuikaitong/p/9639452.html

时间: 2024-11-07 21:36:26

vue 中 v-model 和 .sync修饰符的相关文章

vue中常用的事件和修饰符简单总结

1:阻止冒泡事件 JS事件流其中一种是冒泡事件,当一个元素被触发一个事件时,该目标元素的事件会优先被执行,然后向外传播到每个祖先元素,恰如水里的一个泡泡似的,从产生就一直往上浮,到在水平面时,它才消失.在这个过程中,如果你只希望事件发生在目标元素,而不想它传播到祖先元素上去,那么你需要在"泡泡"离开对象之前刺破它. 在vue中怎么写? 2:阻止默认行为 在vue中怎么写? 3:键盘事件 获取键码?通过事件对象来获取 注意:keydown事件和keyup事件的区别? keydown是在键

vue .sync修饰符的使用

vue的官网介绍非常不错,先通读一遍. 2.3.0+ 新增 在有些情况下,我们可能需要对一个 prop 进行"双向绑定".不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显的改动来源. 这也是为什么我们推荐以 update:my-prop-name 的模式触发事件取而代之.举个例子,在一个包含 title prop 的假设的组件中,我们可以用以下方法表达对其赋新值的意图: this.$emit('update:title', newTit

[Vue].sync 修饰符

可实现对prop 进行"双向绑定". 用法: 一.同时设置1个 prop 1.以 update:my-prop-name 的模式触发事件,如对于title属性: this.$emit('update:title', newTitle) 2.然后父组件可以监听那个事件并根据需要更新一个本地的数据属性: <text-document v-bind:title="doc.title" v-on:update:title="doc.title = $even

vue组件双向绑定.sync修饰符的一个坑

我们知道组件是单项的,但是有时候需要双向,这时候我们可以使用.sync修饰符,但今天遇到一个坑,一直不成功,花了半小时试出来的.... 在编程的时候我们很习惯冒号后面跟着空格.而.sync双向绑定需要子组件显性触发 this.$emit('update:foo', newValue) 这里的updata:foo可以说是一个名字,不能加空格,不能加空格,不能加空格!!!这就是坑,由于编程习惯,也许会有人加空格,我也是,所以写出来当作一个笔记. 根据文档 <comp :foo.sync="ba

C++中 容易忽视的const 修饰符

C++可以用const定义常量,也可以用#define定义常量,但是前者比后者有更多的有点: (1)const常量有数据类型,而宏常量没有数据类型.编译器可以对const进行类型安全检查,而后者只进行字符替换,没有类型安全检查,并且在字符替换中可能会产生意料不到的错误!(如类型不匹配问题) (2)编译器处理方式不同.define宏是在预处理阶段展开,const常量是编译运行阶段使用. (3)存储方式不同.define宏仅仅是展开,有很多地方使用,就展开多少次,不会分配内存.const常量会在内存

文成小盆友python-num8 面向对象中的成员,成员修饰符,特殊成员,异常处理,设计模式之单例模式

本节主要内容: 1.面向对象中的成员 2.成员修饰符 3.特殊成员 4.异常处理 5.设计模式之单例模式 一.面向对象中的成员(类的成员) 类的成员总共可以分为3大类,每类中有不同的分支. 1.总述,基本分类 如下图所示: 类成员包括字段,方法,和属性 2.字段 如上图字段分为普通字段和静态字段,两者的使用有区别,但是最大的区别在于两者在内存中的保存位置有区别. 普通字段属于对象而静态字段属于类,在使用过程中谁的字段就由谁来调用. 静态字段和普通字段的定义如下: 在调用时分各自调用 #####类

面向对象中的特殊的成员修饰符和几个特殊的方法

面向对象的成员修饰符 #Auther Bob #--*--conding:utf-8 --*-- # 成员修饰符 # 共有成员 # 私有成员 # 1.私有字段 # 私有的普通字段 # 私有的静态字段 # 2.私有方法 # 私有的方法 # 默认情况下,类的字段和方法都是共有的,通过对象和类就直接可以访问,但是如果我们在字段或者方法名字的前面加2个下划线,那么我们就不能在外部访问这些字段和方法,这些 # 方法和字段只能内部方法 class person(object): name = "diandi

block 中使用__weak 和__strong修饰符的问题

在ARC环境下,我们常常会使用weak 的修饰符来修饰一个变量,防止其在block中被循环引用,但是有些特殊情况下,我们在block中又使用strong 来修饰这个在block外刚刚用__weak修饰的变量,为什么会有这样奇怪的写法呢? 后来上网查资料,给的解释就是下面的这段话: 在block中调用self会引起循环引用,但是在block中需要对weakSelf进行 strong,保证代码在执行到block中,self不会被释放,当block执行完后, 会自动释放该strongSelf: 对于程

C#中的overrid和new修饰符区别(代码)

在C#的继承中尝尝会用到相关的修饰词:override和new.这两个修饰符都可以在新的子类中,重写同名的父类方法. override: 扩展或修改继承的方法.属性.索引器或事件的抽象或虚拟实现需要使用到. new:在用作声明修饰符时,new 关键字可以显式隐藏从基类继承的成员. 隐藏继承的成员时,该成员的派生版本将替换基类版本. 以上是这两个修饰符的解释.对于这两者之间的区别之类的说法,其实网上找到的有很多,大多都是些概念性的东西.我这里主要是对于,自己测试的代码和大家分享下. 1 using