详解VUE自定义组件中用.sync修饰符与v-model的区别


Posted in Javascript onJune 26, 2018

.sync修饰组件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>vue-03</title>
  <!-- 引入Vue -->
  <link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="stylesheet">
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
</head>

<body>

  <div class="container" style="margin-top: 12px;">
    <div id="demo" class="row">
      {{ say }}
      <br />
      <my-input :value.sync="say"></my-input>
    </div>
  </div>


  <script>
    new Vue({
      el: '#demo',
      data: {
        say: "123"
      },
      components: {
        "my-input": {
          props: ['value'],
          template: "<div><input v-bind:value='value' v-on:input='change1' />{{value}}</div>",
          watch: {
            value: function(newValue, oldValue) {
              alert('子组件value新旧值' + newValue + '/' + oldValue);
              //this.$emit('update:value', newValue)
            }

          },
          methods: {
            change1: function(e) {
              var v = e.target.value
              this.$emit('update:value', v)
            },

          }
        }
      },
      watch: {
        say: function(n, o) {
          alert('父组件新旧值' + n + '-' + o)
        }
      },
      methods: {

      }
    })
  </script>
</body>

v-model修饰组件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>vue-10</title>
  <!-- 引入Vue -->
  <link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="stylesheet">
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
</head>

<body>

  <div class="container" style="margin-top: 12px;">
    <div id="demo" class="row">
      {{ say }}
      <br />
      <my-input v-model="say"></my-input>
    </div>
  </div>


  <script>
    new Vue({
      el: '#demo',
      data: {
        say: "123"
      },
      components: {
        "my-input": {
          props: ['value'],
          template: "<div><input v-bind:value='value' v-on:input='change' />{{value}}</div>",
          watch: {
            value: function(newValue, oldValue) {
              alert('子组件value新旧值' + newValue + '/' + oldValue);
              //this.$emit('update:value', newValue)
            }

          },
          methods: {
            change: function(e) {
              this.$emit('input', e.target.value)
            }
          }
        }
      }
    })
  </script>
</body>

区别只能自己慢慢体会,个人感觉 .sync用法灵活,而v-model只能接受prop名为为value的值.

两者都需要手动触发$emit方法.

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 注意事项与常用语法小结
Jun 07 Javascript
js实现的仿新浪微博完美的时间组件升级版
Dec 20 Javascript
javascript静态页面传值的三种方法分享
Nov 12 Javascript
express的中间件bodyParser详解
Dec 04 Javascript
JavaScript实现重置表单(reset)的方法
Apr 02 Javascript
javascript如何实现暂停功能
Nov 06 Javascript
基于jQuery实现动态搜索显示功能
May 05 Javascript
详解Angular的双向数据绑定(MV-VM)
Dec 26 Javascript
VUE JS 使用组件实现双向绑定的示例代码
Jan 10 Javascript
react-native DatePicker日期选择组件的实现代码
Sep 12 Javascript
layer.prompt输入层的例子
Sep 24 Javascript
Vue 实现从小到大的横向滑动效果详解
Oct 16 Javascript
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 #jQuery
在vue中使用公共过滤器filter的方法
Jun 26 #Javascript
Vue不能检测到Object/Array更新的情况的解决
Jun 26 #Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
Jun 26 #Javascript
Vue动态控制input的disabled属性的方法
Jun 26 #Javascript
利用Decorator如何控制Koa路由详解
Jun 26 #Javascript
vue实现点击关注后及时更新列表功能
Jun 26 #Javascript
You might like
php注销代码(session注销)
2012/05/31 PHP
使用javascript实现有效时间的控制,并显示将要过期的时间
2014/01/02 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
2014/06/05 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
2014/08/15 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
JavaScript中判断函数、变量是否存在
2015/06/10 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
2015/07/27 Javascript
jQuery Validation PlugIn的使用方法详解
2015/12/18 Javascript
原生js实现jquery函数animate()动画效果的简单实例
2016/08/21 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
2016/09/19 Javascript
JavaScript用JSONP跨域请求数据实例详解
2017/01/06 Javascript
在vscode中统一vue编码风格的方法
2018/02/22 Javascript
nodejs 使用http进行post或get请求的实例(携带cookie)
2019/01/03 NodeJs
解决vue更新路由router-view复用组件内容不刷新的问题
2019/11/04 Javascript
[51:29]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
使用Python构建Hopfield网络的教程
2015/04/14 Python
在Python程序中进行文件读取和写入操作的教程
2015/04/28 Python
详细解析Python中的变量的数据类型
2015/05/13 Python
Python装饰器入门学习教程(九步学习)
2016/01/28 Python
Matplotlib绘制雷达图和三维图的示例代码
2020/01/07 Python
Python创建空列表的字典2种方法详解
2020/02/13 Python
用python绘制樱花树
2020/10/09 Python
html5调用摄像头功能的实现代码
2018/05/07 HTML / CSS
基于Modernizr 让网站进行优雅降级的分析
2013/04/21 HTML / CSS
医学生求职自荐信
2013/10/25 职场文书
临床医学系毕业生推荐信
2013/11/09 职场文书
服装创业计划书范文
2014/02/05 职场文书
我的小天地教学反思
2014/04/30 职场文书
安全生产承诺书范文
2014/05/22 职场文书
爱祖国爱家乡演讲稿
2014/09/02 职场文书
不同意离婚答辩状
2015/05/22 职场文书
焦点访谈观后感
2015/06/11 职场文书
浅谈react useEffect闭包的坑
2021/06/08 Javascript
SpringBoot项目中控制台日志的保存配置操作
2021/06/18 Java/Android
浅谈mysql哪些情况会导致索引失效
2021/11/20 MySQL
PostgreSQL13基于流复制搭建后备服务器的方法
2022/01/18 PostgreSQL