详解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 相关文章推荐
javascript 关于# 和 void的区别分析
Oct 26 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
Dec 12 Javascript
JS简单计算器实例
Jan 20 Javascript
js实现鼠标经过表格行变色的方法
May 12 Javascript
20分钟轻松创建自己的Bootstrap站点
May 12 Javascript
js剪切板应用clipboardData实例解析
May 29 Javascript
js实现图片淡入淡出切换简易效果
Aug 22 Javascript
通俗易懂地解释JS中的闭包
Oct 23 Javascript
浅谈vue项目重构技术要点和总结
Jan 23 Javascript
js 解析 JSON 数据简单示例
Apr 21 Javascript
js实现滑动进度条效果
Aug 21 Javascript
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
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 URL地址获取函数代码(端口等) 推荐
2010/05/15 PHP
解析如何通过PHP函数获取当前运行的环境 来进行判断执行逻辑(小技巧)
2013/06/25 PHP
MySql数据库查询结果用表格输出PHP代码示例
2015/03/20 PHP
PHP解密Unicode及Escape加密字符串
2015/05/17 PHP
Yii2增删改查之查询 where参数详细介绍
2016/08/08 PHP
通过jQuery源码学习javascript(三)
2012/12/27 Javascript
详谈LABJS按需动态加载js文件
2015/05/07 Javascript
js实现跨域的4种实用方法原理分析
2015/10/29 Javascript
Ext JS动态加载JavaScript创建窗体的方法
2016/06/23 Javascript
AngularJS实现分页显示数据库信息
2016/07/01 Javascript
jquery插件锦集【推荐】
2016/12/16 Javascript
微信小程序之拖拽排序(代码分享)
2017/01/21 Javascript
Vue动态路由缓存不相互影响的解决办法
2019/02/19 Javascript
细说Vue组件的服务器端渲染的过程
2019/05/30 Javascript
vue通过video.js解决m3u8视频播放格式的方法
2019/07/30 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
2020/07/12 Javascript
react实现复选框全选和反选组件效果
2020/08/25 Javascript
js轮播图之旋转木马效果
2020/10/13 Javascript
vue实现简单加法计算器
2020/10/22 Javascript
web.py获取上传文件名的正确方法
2014/08/26 Python
大数据分析用java还是Python
2020/07/06 Python
Python 爬虫批量爬取网页图片保存到本地的实现代码
2020/12/24 Python
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
2020/08/19 HTML / CSS
BRASTY捷克:购买香水、化妆品、手袋和手表
2017/07/12 全球购物
精选奢华:THE LIST
2019/09/05 全球购物
医大实习自我鉴定
2013/12/07 职场文书
2014年端午节活动方案
2014/03/11 职场文书
求职信模板
2014/05/23 职场文书
经营目标管理责任书
2014/07/25 职场文书
幸福中国演讲稿
2014/09/12 职场文书
个人贷款授权委托书样本
2014/10/07 职场文书
刑事和解协议书范本
2014/11/19 职场文书
2015年教师自我评价范文
2015/03/04 职场文书
初中班级口号霸气押韵
2015/12/24 职场文书
React-vscode使用jsx语法的问题及解决方法
2021/06/21 Javascript
python中super()函数的理解与基本使用
2021/08/30 Python