详解VUE自定义组件中用.sync修饰符与v-model的区别
.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方法.
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍详解vue 自定义组件使用v-model 及探究其中原理，包括了详解vue 自定义组件使用v-model 及探究其中原理的使用技巧和注意事项，需要的朋友参考一下 1、首先我们来实现自定义组件中使用v-model 父组件中注册子组件 子组件接收父组件传值 2.探究v-model 在input中的v-model功能是实现数据的双向绑定，即绑定name值及改变值。 工作等同于以下代码: v
-
本文向大家介绍详解vue v-model，包括了详解vue v-model的使用技巧和注意事项，需要的朋友参考一下 1. v-model原理 vue中v-model是一个语法糖，所谓的语法糖就是对其他基础功能的二次封装而产生的功能。简单点说，v-model本身就是父组件对子组件状态以及状态改变事件的封装。其实现原理上分为两个部分： 通过props设置子组件的状态 通过监听子组件发出的事件改变父组件
-
本文向大家介绍详解Vue 事件修饰符capture 的使用，包括了详解Vue 事件修饰符capture 的使用的使用技巧和注意事项，需要的朋友参考一下 .capture事件修饰符的作用添加事件侦听器时使用事件捕获模式 即是给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。 就是谁有该事件修饰符，就先触发谁。 代码如下： 总结 以上所述是小编给大家介
-
本文向大家介绍利用Vue v-model实现一个自定义的表单组件，包括了利用Vue v-model实现一个自定义的表单组件的使用技巧和注意事项，需要的朋友参考一下 功能描述: 通过点击按钮,可以增减购物数量 组件名称是 CouterBtn 最终效果如下 我们使用 vue-cli搭建基本的开发环境,这也是最快的进行 .vue组件开发的方式 对于入口组件 App.vue (可以暂时忽略其他细节,我们
-
本文向大家介绍vue在自定义组件中使用v-model进行数据绑定的方法，包括了vue在自定义组件中使用v-model进行数据绑定的方法的使用技巧和注意事项，需要的朋友参考一下 本文介绍了vue v-model进行数据绑定，分享给大家，具体如下 官方例子https://vuefe.cn/v2/api/#model 有这么一句话： 默认情况下，一个组件上的 v-model 会把 value 用作 pr
-
本文向大家介绍vue项目中v-model父子组件通信的实现详解，包括了vue项目中v-model父子组件通信的实现详解的使用技巧和注意事项，需要的朋友参考一下 前言 我们在vue项目中，经常有这样的需求，父组件绑定v-model，子组件输入更改父组件v-model绑定的数值。很多朋友对这种操作不是很清楚，这需要对v-model有比较深入的了解，今天谈谈v-model。 vue的双向数据绑定 v-m