详解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 相关文章推荐
js prototype截取字符串函数
Apr 01 Javascript
js 实现打印网页中定义的部分内容的代码
Apr 01 Javascript
ImageZoom 图片放大镜效果(多功能扩展篇)
Apr 14 Javascript
xml文档转换工具,附图表例子(hta)
Nov 17 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
May 17 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
Aug 19 Javascript
修复bash漏洞的shell脚本分享
Dec 31 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
Jun 14 Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
Jul 14 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
Aug 31 Javascript
Javascript Dom元素获取和添加详解
Sep 24 Javascript
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 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
虫族 Zerg 历史背景
2020/03/14 星际争霸
PHP函数篇详解十进制、二进制、八进制和十六进制转换函数说明
2011/12/05 PHP
hadoop常见错误以及处理方法详解
2013/06/19 PHP
PHP的switch判断语句的“高级”用法详解
2014/10/01 PHP
PHP实现文件下载【实例分享】
2017/04/28 PHP
PHP获取对象属性的三种方法实例分析
2019/01/03 PHP
Javascript select下拉框操作常用方法
2009/11/09 Javascript
Whatever:hover 无需javascript让IE支持丰富伪类
2010/06/29 Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
2011/09/02 Javascript
js如何判断不同系统的浏览器类型
2013/10/28 Javascript
JavaScript中的闭包(Closure)详细介绍
2014/12/30 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
2016/06/25 Javascript
JavaScript学习笔记--常用的互动方法
2016/12/07 Javascript
老生常谈jacascript DOM节点获取
2017/04/17 Javascript
Vue加载json文件的方法简单示例
2019/01/28 Javascript
vue实现新闻展示页的步骤详解
2019/04/11 Javascript
Element Alert警告的具体使用方法
2020/07/27 Javascript
[08:02]DOTA2牵红线 zhou神抱得美人归
2014/03/22 DOTA
[49:31]TFT vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
python避免死锁方法实例分析
2015/06/04 Python
Python 爬取携程所有机票的实例代码
2018/06/11 Python
使用keras时input_shape的维度表示问题说明
2020/06/29 Python
如何通过python实现IOU计算代码实例
2020/11/02 Python
详解Python模块化编程与装饰器
2021/01/16 Python
HTML5 input placeholder 颜色修改示例
2014/05/30 HTML / CSS
马来西亚最好的婴儿商店:Motherhood
2017/09/14 全球购物
时尚圣经:The Fashion Bible
2019/03/03 全球购物
一百多行代码实现react拖拽hooks
2021/03/23 Javascript
遵纪守法演讲稿
2014/05/23 职场文书
2015军训通讯稿大全
2015/07/18 职场文书
2016年党校科级干部培训班学习心得体会
2016/01/06 职场文书
《确定位置》教学反思
2016/02/18 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书
pytorch 实现多个Dataloader同时训练
2021/05/29 Python
JavaScript中MutationObServer监听DOM元素详情
2021/11/27 Javascript
浅析Python中的随机采样和概率分布
2021/12/06 Python