详解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 相关文章推荐
IE和Firefox在JavaScript应用中的兼容性探讨
Apr 01 Javascript
jQuery之字体大小的设置方法
Feb 27 Javascript
JavaScript错误处理
Feb 03 Javascript
悬浮广告方法日常收集整理
Mar 18 Javascript
第九章之路径分页标签与徽章组件
Apr 25 Javascript
JS中this上下文对象使用方式
Oct 09 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
Oct 11 Javascript
详解vue.js移动端导航navigationbar的封装
Jul 05 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
May 09 Javascript
JS集合set类的实现与使用方法示例
Feb 01 Javascript
Vue CLI3基础学习之pages构建多页应用
Jun 02 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
Oct 20 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 json_encode值中大括号与花括号区别
2013/09/30 PHP
php网站地图生成类示例
2014/01/13 PHP
php实现批量下载百度云盘文件例子分享
2014/04/10 PHP
一波PHP中cURL库的常见用法代码示例
2016/05/06 PHP
php版微信js-sdk支付接口类用法示例
2016/10/12 PHP
ajax不执行success回调而是执行了error回调
2012/12/10 Javascript
js实现一个省市区三级联动选择框代码分享
2013/03/06 Javascript
实用的Jquery选项卡TAB示例代码
2013/08/28 Javascript
javascript删除字符串最后一个字符
2014/01/14 Javascript
浅谈JavaScript异常处理语句
2015/06/26 Javascript
javascript实现无缝上下滚动特效
2015/12/16 Javascript
JavaScript笔记之数据属性和存储器属性
2016/03/31 Javascript
AngularJS基础 ng-csp 指令详解
2016/08/01 Javascript
jquery实现手机端单店铺购物车结算删除功能
2017/02/22 Javascript
正则验证小数点后面只能有两位数的方法
2017/02/28 Javascript
js实现图片上传预览原理分析
2017/07/13 Javascript
ionic 3.0+ 项目搭建运行环境的教程
2017/08/09 Javascript
Vue.js实现开发购物车功能的方法详解
2019/02/22 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
2019/09/28 Javascript
vue-router 路由传参用法实例分析
2020/03/06 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
2020/05/29 jQuery
python简单实现刷新智联简历
2016/03/30 Python
Opencv+Python实现图像运动模糊和高斯模糊的示例
2019/04/11 Python
python 设置xlabel,ylabel 坐标轴字体大小,字体类型
2019/07/23 Python
python爬取百度贴吧前1000页内容(requests库面向对象思想实现)
2019/08/10 Python
python异步Web框架sanic的实现
2020/04/27 Python
马来西亚户外装备商店:PTT Outdoor
2019/07/13 全球购物
公司活动策划方案
2014/01/13 职场文书
人力资源经理的岗位职责范本
2014/02/28 职场文书
海飞丝的广告词
2014/03/20 职场文书
银行金融服务方案
2014/06/11 职场文书
艺术学院毕业生自荐信
2014/07/05 职场文书
2014幼儿园教育教学工作总结
2014/12/17 职场文书
先进党组织事迹材料
2014/12/26 职场文书
死者家属慰问信
2015/03/24 职场文书
bat批处理之字符串操作的实现
2022/03/16 Python